jQuery如何操作checkbox
来源：互联网 发布：软件行业分析 编辑：程序博客网 时间：2024/05/22 01:39
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <script src="Scripts\jquery-1.4.1.min.js" type="text/javascript"></script> <title>点击隐藏</title> <script type="text/javascript"> $(document).ready(function () { //给所有checkbox添加click事件 $('input:checkbox').bind('click', function (data) { SetCheckBox(data); }); function SetCheckBox(data) { //alert('当前是否选中：' + data.target.checked); } //全选 $('#btn1').click(function () { $(':checkbox').attr('checked', true); }); //取消全选 $('#btn2').click(function () { $(':checkbox').attr('checked', false); }); //反选 $('#btn3').click(function () { //$(':checkbox').each(function () {}); //所有的checkbox //$('input[name="chkN"]').each(function () {});//name="chkN"的checkbox $(':checkbox').each(function () { if ($(this).attr("checked")) { $(this).removeAttr("checked"); //$(this).attr("checked", false);//此行代码和$(this).removeAttr("checked");效果一样 } else { $(this).attr("checked", "true"); } }); }); //选中所有奇数 $('#btn4').click(function () { $("input[name='chkN']:even").attr("checked", "true"); }); //选中所有偶数 $('#btn5').click(function () { $("input[name='chkN']:odd").attr("checked", "true"); }); //获得选中的所有值 var chkValues = ""; $('#btn6').click(function () { chkValues = ""; //$("input[name='chkN']:checkbox:checked")//根据name，":checkbox" //$("input[type=checkbox]:checkbox:checked")//所有checkbox $("input[type=checkbox]:checked").each(function () { chkValues += $(this).val() + " "; }); alert(chkValues); }); //checkbox里的value有在(1000,3000,4000,8000)中就勾选 $('#btn7').click(function () { var filter = "1000,3000,4000,8000"; var list = filter.split(","); $(":checkbox").each(function () { $(this).attr("checked", $.inArray(this.value, list) > -1); }); }); //显示当前选中的行信息 $('#btn8').click(function () { var str = ""; $("input[type=checkbox]:checked").each(function () { str += $(this).parent('td').parent('tr').find('.city').text() }); alert(str); //如果要去掉空格： str=$.trim(str); }); }); //end $(document).ready </script></head><body> <form id="form1" runat="server"> <div> <input type="button" id="btn1" value="全选" /> <input type="button" id="btn2" value="取消全选" /> <input type="button" id="btn3" value="反选" /><br /> <input type="button" id="btn4" value="选中所有奇数" /> <input type="button" id="btn5" value="选中所有偶数" /> <input type="button" id="btn6" value="获得选中的所有值" /><br /> <input type="button" id="btn7" value="checkbox里的value有在(1000,3000,4000,8000)中就勾选" /> <input type="button" id="btn8" value="显示当前选中的行信息" /> </div><br /> <table border="1" width="300px"> <tr> <td> <input type="checkbox" id="chk" name="chkN" class="chkC" value="1000" /> <!--for 属性规定 label 与哪个表单元素绑定。 http://www.w3school.com.cn/tags/att_label_for.asp --> <label for="chk"> 甘肃[1000]</label> </td> <td id="LZ" class="city"> 兰州 </td> </tr> <tr> <td> <input type="checkbox" id="Checkbox1" name="chkN" class="chkC" value="2000" /> <label for="Checkbox1"> 陕西[2000]</label> </td> <td id="XZ" class="city"> 西安 </td> </tr> <tr> <td> <input type="checkbox" id="Checkbox2" name="chkN" class="chkC" value="3000" /> <label for="Checkbox2"> 湖北[3000]</label> </td> <td id="WH" class="city"> 武汉 </td> </tr> <tr> <td> <input type="checkbox" id="Checkbox3" name="chkN" class="chkC" value="4000" /> <label for="Checkbox3"> 河南[4000]</label> </td> <td id="ZZ" class="city"> 郑州 </td> </tr> <tr> <td> <input type="checkbox" id="Checkbox4" name="chkN" class="chkC" value="5000" /> <label for="Checkbox4"> 湖南[5000]</label> </td> <td id="CS" class="city"> 长沙 </td> </tr> <tr> <td> <input type="checkbox" id="Checkbox5" name="chkN" class="chkC" value="6000" /> <label for="Checkbox5"> 安徽[6000]</label> </td> <td id="HF" class="city"> 合肥 </td> </tr> </table> </form></body></html>
