演绎企业和品牌的极致之美
我们专注于网站建设,我们拥有专业的设计团队,为客户提供高品质的网站设计。
为客户提供高品质网站是我们的服务宗旨。
7*24小时全天候服务,快速响应,保证系统稳定性,专设投诉部门,全面协调解决客户问题。
我们根据客户的具体需求进行详细报价,我们的服务宗旨:花最少的钱,享最舒适的服务。
关于jquery通过点击全选按钮实现全选问题
  • 时间:2018-06-14
  • 作者:兴弘海科技
  • 点击量:

HTML代码:

<table>

<tr>

<td><input type="checkbox" name="b">全选</td><td>内容</td>

</tr>

<tr>

<td><input type="checkbox" name="a"></td><td>复选1</td>

</tr>

<tr>

<td><input type="checkbox" name="a"></td><td>复选2</td>

</tr>

<tr>

<td><input type="checkbox" name="a"></td><td>复选3</td>

</tr>

<tr>

<td><input type="checkbox" name="a"></td><td>复选4</td>

</tr>

<tr>

<td><input type="checkbox" name="a"></td><td>复选5</td>

</tr>

<tr>

<td><input type="checkbox" name="a"></td><td>复选6</td>

</table>

JAVASCRIPT代码:

<script>

$("input[name='b']").click(function(){

//判断当前点击的复选框处于什么状态$(this).is(":checked") 返回的是布尔类型

if($(this).is(":checked")){

$("input[name='a']").prop("checked",true);

}else{

$("input[name='a']").prop("checked",false);

}

});

</script>

3

这样就实现了全选和全不选。
以上为正确测试过的代码。
 

今天遇到一个问题,就是在点击checkbox后,$(this).attr('checked')得到的值要么是undefined,要么是checked,同一个表单一直点击却一点都不会发生改变,调试了一下,this里的checked是会改变的,说明checkbox是有正常运行的,查了很久后,最我怀疑是$(this).attr('checked')这句代码出了问题,果然往这个方向找有了收获。

    原来jquery 1.6以前用$(this).attr('checked')得到的是true/false,但到了1.6以后,$(this).attr('checked')就有点问题了。

    解决方案如下:

    1. 使用is()

        例句: $(this).is(":checked");             // 注意是':checked',有冒号的!

    2. 使用prop()方法,JQ1.6之后,可以通过attr方法去获得属性,通过prop方法去获得特性,属性指的是“name,id”等等,特性指的是“selectedIndex, tagName, nodeName”等等。 

        例句: $(this).prop('checked');

小编也是找了一下午,才找出问题,希望大家也注意。

相关文章
3站合一