jquery之checkbox(全选，全不选以及显示勾选的value值等多种情况)

来源：互联网发布：南风知我意1全文阅读编辑：程序博客网时间：2024/05/23 11:01

注：1.给checkbox设置属性值时要使用.prop();而不是attr();

2.使用attr()设置属性会导致全选失效(页面中第一次勾选或者取消全选不会有问题，从第二次开始失效)

html:

<table><tr><td><label>数学</label><input type="checkbox" name="course" value="math"/></td></tr><tr><td><label>语文</label><input type="checkbox" name="course" value="chinese"/></td></tr><tr><td><label>英语</label><input type="checkbox" name="course" value="english"/></td></tr><tr></tr><tr><td><label>全选</label><input type="checkbox" id="checkAll"  name="checkAll"/></td></tr><tr><td><input type="button" id="showValue" value="showValue"/></td></tr></table>

js：

$(document).ready(function(){var checkedAll = $("[name='checkAll']");var checkedOne = $("[name='course']");/** * 全选或者全不选 */checkedAll.click(function(){if(checkedAll.is(":checked")){checkedOne.prop("checked",true);}else{checkedOne.prop("checked",false);}});/** * 点击单个checkbox，确定当前是否要勾选全选 */checkedOne.click(function(){var count = 0;checkedOne.each(function(){if($(this).is(":checked")){count++;}});if(count==checkedOne.length){checkedAll.prop("checked",true);}else{checkedAll.prop("checked",false);}});/** * 显示选中checkbox的值 */$("#showValue").click(function(){var arr = new Array();checkedOne.each(function(){if($(this).is(":checked")){arr.push($(this).val());}});var str = arr.join(",");alert(str);});});

1 0