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

标签 jquery

如何识别不同行中的以下复选框并分别选中/取消选中它们。

<input type="checkbox" value="F" name="eph-ds[2457][]">
<input type="checkbox" value="PR" name="eph-ds[2457][]">
<input type="checkbox" value="DPH" name="eph-ds[2457][]">
<input type="checkbox" value="F" name="eph-ds[2450][]">
<input type="checkbox" value="PR" name="eph-ds[2450][]">
<input type="checkbox" value="DPH" name="eph-ds[2450][]">

其中 [number] 是动态创建的。

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

    $(":checkbox").change(function() {
    var current = this.value;
    if (current == "F") {
$(":checkbox[value=PR]").prop("checked", false);
    } 
        if (current == "PR") {
$(":checkbox[value=F]").prop("checked", false);

    } 
  if (current == "DPH") {
$(":checkbox[value=F]").prop("checked", false);
$(":checkbox[value=PR]").prop("checked", false);

    } 
});

此代码有效,但如果我取消选择第二行中的复选框,那么第一行中的复选框也将被取消选中:

enter image description here

最佳答案

这将执行您所要求的操作:

jsFiddle Working Example

var $this,num,val;

$('input[name^="eph-ds["]').click(function() {
    $this = $(this);
    num = $this.attr('name').split('[')[1].replace("]", "");
    val = $this.val();
    if (val=="F"){
        $('input:checkbox[name="eph-ds['+num+'][]"][value="PR"]').prop('checked',false);
    }else if (val=="PR"){
        $('input:checkbox[name="eph-ds['+num+'][]"][value="F"]').prop('checked',false);
    }else if (val=="DPH"){
        $('input:checkbox[name="eph-ds['+num+'][]"]').not($this).prop('checked',false);
    }
});

注释:

  1. 在顶部声明变量,因此每次单击复选框时无需重新声明它们

  2. jsFiddle 添加了在选中 DPH 时禁用 F 和 PR(否则在选中 DPH 框后用户可以选中 PR 或 F)。

  3. 无需按组查询您的复选框(按照之前回复者的建议)

  4. 如果难以理解,可以将这一行分为三行:
    num = $this.attr('name').split('[')[1].replace("]", "");

name = $this.attr('name'); //returns eph-ds[####][]
temp = name.split('[')[1]; //returns ####]
num = temp.replace("]", ""); //removes trailing ]

关于jQuery 选择多个属性并选中/取消选中另一个复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20982930/

相关文章:

javascript - jQueryUI 对话框的顺序是否有所不同(也许只是 TinyMCE)?

javascript - 更改状态时 Bootstrap switchChange 事件仍然触发

jquery - 使用 Jquery ui 可拖动,如何更改停止时的反转?

javascript - 在用户打开它之前动态地将 <options> 添加到 <select> 元素

jquery - 选择从开始到某一特定行的所有表行

javascript - 类型错误 : Cannot read property 'history' of undefined in Jquery - React

javascript - 使用 CSS 重置位置

javascript - 如何在twitter api中的关注按钮回调函数中检索用户详细信息?

jquery - 可拖动/可排序的辅助尺寸

javascript - 编辑 ckeditor config.js 没有影响