jQuery操作复选框的简单使用

时间:2021-07-13 21:19:26

  开发中为了实现一个小功能,就是复选框的相互影响事件,如下图:

jQuery操作复选框的简单使用

  就是通过复选框设置权限,权限是分等级的,这是一个web管理系统的应用,一个管理员具有三个权限赋予,权限也是有等级的,其中删除和编辑权限相当,就是说当拥有编辑和删除权限时,一定拥有查看权限,反过来不一定。但是没有查看权限时,一定没有编辑和删除权限,大体就是这么个逻辑

  在前端为了用户体验,用jQuery绑定点击事件来完成,开始用的方法是.attr(),用法是$("[name = inputname]:checkbox").attr("checked", true);

这样就能实现复选框的选中效果,网上大部分都是这种方法,是可以的,但是注意name不能设置成比如name="name1[0]"这种格式,否则上述方法会运行错误,因为[ ]这种符号name属性是不支持的,但是后端用起来是数组格式,比较方便,所以如果表单name带有中括号,这种方法是不能用的。

  另外也测试了其他方法,有时候开发者模式下发现复选框属性确实变成了checked,但是效果上却没有选中,并且attr返回值是checked这样的话对复选框操作的难度增大了,所以放弃了这个方法,我个人比较习惯使用id选择器操作,下面方法可以完美的适用于这个问题的操作

  jQuery中还有一个类似attr的方法,就是prop这个方法非常适合于复选框之类的操作,有两种用法如下:

    1、返回属性的值:$(selector).prop(property),一般返回true和false

    2、设置属性的值:$(selector).prop(property,value),比如设置选中或者是否可用

  另外第二个参数还可以用函数设置属性和值,这里就不具体说了

有了这个操作,我们应该什么时候用attr和prop方法呢,我的体会是一般设置表单的样式之外的单一值属性,比如required,checked,disabled,readonly,这类属性可以写成checked也可以写成checked="checked",就使用prop方法,一般返回值是true或者false的布尔值,另外就用attr设置就行了,比如src,style等都是很好用的

网上有一种解释也不错,记录一下:

  1.添加属性名称该属性就会生效应该使用prop();

  2.是有true,false两个属性使用prop();
  3.其他则使用attr();

比如我这个小特效,可以使用onchange或者onclick绑定事件,但是其实操作需要好几个事件,所以要写好几个函数,直接用jQuery的id绑定就不错,应用的代码如下:

         地区管理:<br />
<div style="margin-left:238px;">
查看<input type="checkbox" class="am-input-sm" name="area[0]" id="area0" value="1" />
&nbsp;
编辑<input type="checkbox" class="am-input-sm" name="area[1]" id="area1" value="1" />
&nbsp;
删除<input type="checkbox" class="am-input-sm" name="area[2]" id="area2" value="1" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#area2').click(function(){
if($('#area0').prop('checked')==false&&$('#area2').prop('checked')==true){
$('#area0').prop('checked',true);
}
});
$('#area1').click(function(){
if($('#area0').prop('checked')==false&&$('#area1').prop('checked')==true){
$('#area0').prop('checked',true);
}
});
$('#area0').click(function(){
if($('#area0').prop('checked')==false&&$('#area1').prop('checked')==true){
$('#area1').prop('checked',false);
}
if($('#area0').prop('checked')==false&&$('#area2').prop('checked')==true){
$('#area2').prop('checked',false);
}
});
});
</script>

这是一部分代码,但是完全实现了这个功能,逻辑也比较简单,需要注意的一点是比如点击删除后即id="area2"的复选框后,复选框被选中,这一瞬间值是改变的,从没选中到选中,$("#area2").prop("checked")的值从false变成了true,注意这里其他的就没问题了