首页 > 代码库 > jQuery对checkbox的各种操作

jQuery对checkbox的各种操作

 1     //注意: 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上(包含)建议用prop 2  3     //1、根据id获取checkbox 4     $("#cbCheckbox1"); 5  6     //2、获取所有的checkbox 7     $("input[type=‘checkbox‘]");//or 8     $("input[name=‘cb‘]"); 9 10     //3、获取所有选中的checkbox11     $("input:checkbox:checked");//or12     $("input:[type=‘checkbox‘]:checked");//or13     $("input[type=‘checkbox‘]:checked");//or14     $("input:[name=‘ck‘]:checked");15 16     //4、获取checkbox值17     //用.val()即可,比如:18     $("#cbCheckbox1").val();19 20 21     //5、获取多个选中的checkbox值22     var vals = [];23     $(‘input:checkbox:checked‘).each(function (index, item) {24         vals.push($(this).val());25     });26     27     //6、判断checkbox是否选中(jquery 1.6以前版本 用  $(this).attr("checked"))28     $("#cbCheckbox1").click(function () {29         if ($(this).prop("checked")) {30             alert("选中");31         } else {32             alert("没有选中");33         }34     });35 36     //7、设置checkbox为选中状态37     $(‘input:checkbox‘).attr("checked", ‘checked‘);//or38     $(‘input:checkbox‘).attr("checked", true);39 40     //8、设置checkbox为不选中状态41     $(‘input:checkbox‘).attr("checked", ‘‘);//or42     $(‘input:checkbox‘).attr("checked", false);43 44     //9、设置checkbox为禁用状态(jquery<1.6用attr,jquery>=1.6建议用prop)45     $("input[type=‘checkbox‘]").attr("disabled", "disabled");//or46     $("input[type=‘checkbox‘]").attr("disabled", true);//or47     $("input[type=‘checkbox‘]").prop("disabled", true);//or48     $("input[type=‘checkbox‘]").prop("disabled", "disabled");49 50     //10、设置checkbox为启用状态(jquery<1.6用attr,jquery>=1.6建议用prop)51     $("input[type=‘checkbox‘]").removeAttr("disabled");//or52     $("input[type=‘checkbox‘]").attr("disabled", false);//or53     $("input[type=‘checkbox‘]").prop("disabled", "");//or54     $("input[type=‘checkbox‘]").prop("disabled", false);

  代码如下:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4     <title></title> 5 </head> 6 <body> 7     <h3>jQuery操作checkbox 8     </h3> 9     <input type="checkbox" id="cbCheckbox1" value="1" />10     <input type="checkbox" value="2" />11     <input type="checkbox" disabled="disabled" value="3" />12     <input type="checkbox" value="4" />13     <input type="checkbox" disabled="true" value="5" />14     <br />15     <input type="button" id="btnDisabled" value="禁用" onclick="fn_disabled();" />16     <input type="button" id="Button1" value="启用" onclick="fn_enable();" /><br />17     <input type="button" id="Button2" value="获取选中的值" onclick="getCheckedValues();" /><br />18     <input type="button" id="Button3" value="选中第二个" onclick="checkedSecond();" />19     <input type="button" id="Button4" value="取消选中第二个" onclick="uncheckedSecond();" /><br />20 </body>21 </html>22 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>23 <script type="text/javascript">24 25     function fn_disabled() {26         //$("input[type=‘checkbox‘]").attr("disabled", "disabled");27         //$("input[type=‘checkbox‘]").attr("disabled", true);28         $("input[type=‘checkbox‘]").prop("disabled", true);29         //  $("input[type=‘checkbox‘]").prop("disabled", "disabled");30     }31 32     function fn_enable() {33         //  $("input[type=‘checkbox‘]").removeAttr("disabled");34         // $("input[type=‘checkbox‘]").attr("disabled", false);35         // $("input[type=‘checkbox‘]").prop("disabled","");36         $("input[type=‘checkbox‘]").prop("disabled", false);37     }38 39     //获取选中的 checkbox的值40     function getCheckedValues() {41         var arr = [];42         $("input[type=‘checkbox‘]:checked").each(function (index, item) {//43             arr.push($(this).val());44         });45         alert(arr);46     }47 48     function checkedSecond() {49         // $("input[type=‘checkbox‘]:eq(1)").prop("checked", "checked");50         $("input[type=‘checkbox‘]:eq(1)").prop("checked", true);51     }52 53     function uncheckedSecond() {54         //  $("input[type=‘checkbox‘]:eq(1)").prop("checked", "");55         $("input[type=‘checkbox‘]:eq(1)").prop("checked", false);56     }57 58     $("#cbCheckbox1").click(function () {59         if ($(this).prop("checked")) {//jquery 1.6以前版本 用  $(this).attr("checked")60             alert("选中");61         } else {62             alert("没有选中");63         }64     });65 66 </script>

 

jQuery对checkbox的各种操作