jQuery选择多个属性并选中/取消选中另一个复选框

前端之家收集整理的这篇文章主要介绍了jQuery选择多个属性并选中/取消选中另一个复选框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我如何识别不同行中的以下复选框,并单独选中/取消选中它们.
  1. <input type="checkBox" value="F" name="eph-ds[2457][]">
  2. <input type="checkBox" value="PR" name="eph-ds[2457][]">
  3. <input type="checkBox" value="DPH" name="eph-ds[2457][]">
  4. <input type="checkBox" value="F" name="eph-ds[2450][]">
  5. <input type="checkBox" value="PR" name="eph-ds[2450][]">
  6. <input type="checkBox" value="DPH" name="eph-ds[2450][]">

其中[数字]是动态创建的.

示例:如果选中“F”,则取消选中“PR”.如果选中“PR”,则取消选中“F”.如果选中“DPH”,则取消选中全部.

  1. $(":checkBox").change(function() {
  2. var current = this.value;
  3. if (current == "F") {
  4. $(":checkBox[value=PR]").prop("checked",false);
  5. }
  6. if (current == "PR") {
  7. $(":checkBox[value=F]").prop("checked",false);
  8.  
  9. }
  10. if (current == "DPH") {
  11. $(":checkBox[value=F]").prop("checked",false);
  12. $(":checkBox[value=PR]").prop("checked",false);
  13.  
  14. }
  15. });

代码正常,但如果我取消选中第二行中的复选框,则第一行中的复选框也将取消选中:

解决方法

这将按照您的要求执行:

jsFiddle Working Example

  1. var $this,num,val;
  2.  
  3. $('input[name^="eph-ds["]').click(function() {
  4. $this = $(this);
  5. num = $this.attr('name').split('[')[1].replace("]","");
  6. val = $this.val();
  7. if (val=="F"){
  8. $('input:checkBox[name="eph-ds['+num+'][]"][value="PR"]').prop('checked',false);
  9. }else if (val=="PR"){
  10. $('input:checkBox[name="eph-ds['+num+'][]"][value="F"]').prop('checked',false);
  11. }else if (val=="DPH"){
  12. $('input:checkBox[name="eph-ds['+num+'][]"]').not($this).prop('checked',false);
  13. }
  14. });

笔记:

>在顶部声明的变量,因此无需在每次复选框单击时重新声明它们
>当检查DPH时,jsFiddle添加禁用F和PR(否则在检查DPH框后,用户可以检查PR或F).
>无需将您的复选框作为组查询(如前一个响应者所建议的那样)
>如果难以理解,这条线可以分为三行:
num = $this.attr(‘name’).split(‘[‘)[1] .replace(“]”,“”);

name = $this.attr(‘name’); //返回eph-ds [####] []temp = name.split(‘[‘)[1]; //返回####]num = temp.replace(“]”,“”); //删除尾随]

猜你在找的jQuery相关文章