jQuery: Test if checkbox is NOT checked
我很难弄清楚。我有两个复选框(将来会有更多):
checkSurfaceEnvironment-1 checkSurfaceEnvironment-2
基本上,我想编写一个if语句,测试其中一个是否被检查,另一个是否被检查。最简单的方法是什么?
1 2 3 4 | if ( $("#checkSurfaceEnvironment-1").attr('checked', true) && $("#checkSurfaceEnvironment-2").is('**(NOT??)** :checked') ) { // do something } |
我使用的一种可靠方法是:
1 2 3 | if($("#checkSurfaceEnvironment-1").prop('checked') == true){ //do something } |
如果要对选中的元素进行迭代,请使用父元素
1 2 3 4 5 | $("#parentId").find("checkbox").each(function(){ if ($(this).prop('checked')==true){ //do something } }); |
更多信息:
这很好地工作,因为所有复选框都选中了一个存储复选框实际状态的属性。如果您希望检查页面并尝试选中和取消选中复选框,您会注意到"选中"(如果存在)属性将保持不变。此属性仅表示复选框的初始状态,而不是当前状态。当前状态存储在该复选框的dom元素的选中属性中。
请参阅HTML中的属性和属性
1 2 3 | if (!$("#checkSurfaceEnvironment-1").is(":checked")) { // do something if the checkbox is NOT checked } |
也可以使用jquery
1 2 3 | if ($('#checkSurfaceEnvironment').not(':checked').length) { // do stuff for not selected } |
JSfiddle示例
附加说明从
The .not() method will end up providing you with more readable
selections than pushing complex selectors or variables into a :not()
selector filter. In most cases, it is a better choice.
另一种方法:
这里是一个工作示例,这里是代码,您还应该使用prop。
1 2 3 4 5 6 7 8 9 | $('input[type="checkbox"]').mouseenter(function() { if ($(this).is(':checked')) { //$(this).prop('checked',false); alert("is checked"); } else { //$(this).prop('checked',true); alert("not checked"); } });? |
我注释了切换选中属性的方法。
1 | if ( $("#checkSurfaceEnvironment-1").is(":checked") && $("#checkSurfaceEnvironment-2").not(":checked") ) |
我在寻找一个更直接的实现,就像Avijendr建议的那样。
我对他/她的语法有点问题,但我要做到这一点:
1 | if ($('.user-forms input[id*="chkPrint"]:not(:checked)').length > 0) |
在我的例子中,我有一个带有类
这里我有一个问题的片段。
1 2 3 4 5 6 7 8 9 10 11 | $(function(){ $("#buttoncheck").click(function(){ if($('[type="checkbox"]').is(":checked")){ $('.checkboxStatus').html("Congratulations!"+$('[type="checkbox"]:checked').length+" checkbox checked"); }else{ $('.checkboxStatus').html("Sorry! Checkbox is not checked"); } return false; }) }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <form> <p> <label> <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0"> Checkbox</label> <label> <input type="checkbox" name="CheckboxGroup1_" value="checkbox" id="CheckboxGroup1_1"> Checkbox</label> </p> <p> <input type="reset" value="Reset"> <input type="submit" id="buttoncheck" value="Check"> </p> <p class="checkboxStatus"> </p> </form> |
像你这样用
我认为(使用jquery)检查复选框是否选中的最简单方法是:
如果"检查":
1 2 3 | if ($(this).is(':checked')) { // I'm checked let's do something } |
如果没有"选中",则:
1 2 3 | if (!$(this).is(':checked')) { // I'm NOT checked let's do something } |
试试这个
1 2 3 | if ($("#checkSurfaceEnvironment-1:checked").length>0) { //your code in case of NOT checked } |
在上面的代码中,通过id
它将返回选中元素对象的数组。如果数组中存在任何对象,那么条件是否满足。
简单容易检查或取消检查的条件
1 2 3 4 5 6 7 8 9 10 11 | <input type="checkbox" id="ev-click" name="" value=""> $("#ev-click" ).click(function() { if(this.checked){ alert('checked'); } if(!this.checked){ alert('Unchecked'); } }); |
有两种方法可以检查状况。
1 2 3 | if ($("#checkSurfaceEnvironment-1").is(":checked")) { // Put your code here if checkbox is checked } |
或者你也可以用这个
1 2 3 | if($("#checkSurfaceEnvironment-1").prop('checked') == true){ // Put your code here if checkbox is checked } |
我希望这对你有用。
下面是给出的最简单的方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script type="text/javascript"> $(document).ready(function () { $("#chk_selall").change("click", function () { if (this.checked) { //do something } if (!this.checked) { //do something } }); }); |
如果在一个DIV中检查了所有checBox,则返回true
1 2 3 4 5 6 7 8 9 | function all_checked (id_div){ all_checked = true; $(id_div+' input[type="checkbox"]').each(function() { all_checked = all_checked && $('this').prop('checked'); } return all_checked; } |
我用这个为我工作!
1 2 3 4 5 | $("checkbox selector").click(function() { if($(this).prop('checked')==true){ do what you need! } }); |
我知道这已经得到了回答,但这仍然是一个很好的方法:
1 2 3 | if ($("#checkbox").is(":checked")==false) { //Do stuff here like: $(".span").html("<span>Lorem</span>"); } |
1 2 3 4 5 6 7 8 | if($("#checkbox1").prop('checked') == false){ alert('checkbox is not checked'); //do something } else { alert('checkbox is checked'); } |
1 2 3 4 5 6 7 8 9 10 11 12 | $("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4").change(function () { var item = $("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4"); if (item.is(":checked")==true) { //execute your code here } else if (item.is(":not(:checked)")) { //execute your code here } }); |