Question

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

<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]是dinamically创建的。

示例：如果选中“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

Answer 1

这将按照您的要求执行：

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);
    }
});

注意：

在顶部声明的变量因此无需在每个复选框中重新声明它们
jsFiddle在选中DPH时添加禁用F和PR（否则在检查DPH框之后用户可以检查PR或F ）。
无需将您的复选框作为群组查询（按照之前的回复者的建议）
如果难以理解，这条线可以分为三行：
num = $this.attr('name').split('[')[1].replace("]", "");

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

Answer 2

API示例使用引号来解决此问题。

$("input[name='eph-ds[2457][]'][value='PR']").prop("checked", false);

要选择所有这些而不管动态数字，请使用attr^=value

$("input[name^='eph-ds['][value='PR']").prop("checked", false);

http://api.jquery.com/attribute-starts-with-selector/

Answer 3

试试这个：

$("input[name=eph-ds[2457][]],input[value=PR]").prop("checked", false);

Answer 4

像这样：

$('input[type="checkbox"]').prop('checked', false);

Answer 5

您需要打开复选框以便能够将它们作为组进行查询，我将您的标记简化为：

<div class="row">
   <input type="checkbox" value="F" name="eph-ds[2457][]">F<br/>
   <input type="checkbox" value="PR" name="eph-ds[2457][]">PR<br/>
   <input type="checkbox" value="DPH" name="eph-ds[2457][]">DPH<br/>
</div>

<div class="row">
   <input type="checkbox" value="F" name="eph-ds[2450][]">F<br/>
   <input type="checkbox" value="PR" name="eph-ds[2450][]">PR<br/>
   <input type="checkbox" value="DPH" name="eph-ds[2450][]">DPH<br/>
</div>

你仍然可以为你的造型和结构添加标签和任何dom元素，但重要的是要有一个包装器（在我的情况下为div.row）

现在使用以下脚本：

<script>
        $(document).ready(function(){
            $(":checkbox").change(function(){
                // get the wrapper so it won't affect the checkboxes in other rows
                var _parent_row = $(this).closest(".row");
                // get the checkbox value
                var _value = $(this).val();

                // uncheck PR if F is checked
                if(_value == "F" && $(this).isChecked())
                {
                    var _pr = $(_parent_row).find(":checkbox[value='PR']");
                    _pr.uncheck();
                }

                // uncheck F if PR is checked
                if(_value == "PR" && $(this).isChecked())
                {
                    var _f = $(_parent_row).find(":checkbox[value='F']");
                    _f.uncheck();
                }

                // uncheck All if DPH is checked
                if(_value == "DPH" && $(this).isChecked())
                {
                    var _f = $(_parent_row).find(":checkbox[value='F']");
                    var _pr = $(_parent_row).find(":checkbox[value='PR']");
                    _f.uncheck();
                    _pr.uncheck();
                }
            })
        })

        // prototype function to test if a checkbox is checked
        $.fn.isChecked = function(){
            return $(this).is(':checked');
        };

        // prototype function to check a textbox
        $.fn.check = function(){
            $(this).attr('checked', true);
        };

        // prototype function to uncheck a textbox
        $.fn.uncheck = function(){
            $(this).attr('checked', false);
        };
    </script>

这应该这样做:) 您仍然可以在文档中的任何其他复选框上使用.isChecked（）,. check（）和.uncheck（）（这样您就不必重复了）

Answer 6

检查此JSFiddle Example

HTML代码

<div class="row">
   <input type="checkbox" value="F" name="eph-ds[2457][]">F<br/>
   <input type="checkbox" value="PR" name="eph-ds[2457][]">PR<br/>
   <input type="checkbox" class="clear" value="DPH" name="eph-ds[2457][]">DPH<br/>
</div>

<div class="row">
   <input type="checkbox" value="F" name="eph-ds[2450][]">F<br/>
   <input type="checkbox" value="PR" name="eph-ds[2450][]">PR<br/>
   <input type="checkbox" class="clear" value="DPH" name="eph-ds[2450][]">DPH<br/>
</div>

JQuery 代码

$(document).ready(function(){

    $('.row .clear').change(function(){
        clearFunction($(this).parent('.row'));
        $(this).prop("checked",false);
    });


    $('.row input:checkbox').change(function(){
        $(this).siblings('input').prop("checked", false);
    });
}); 
    function clearFunction(localEl){
        localEl.children('input:checkbox').each(
            function(){
                if($(this).prop('checked')){
                    $(this).removeAttr('checked');
                }
            }
        );
    }

Answer 7

在10分钟内做到了这一点

please check it out my minimalist approch

<div>
<input type='checkbox' class='mEx cBox' name='F' title='F'/>
<input type='checkbox' class='mEx cBox' name='PR' title='PR'/>
<input type='checkbox' class='Ex cBox' name='DPH' title='DPH'/>
</div>

$('.cBox').change(function(){
    var current = $(this);
    var parentCntr = current.parent();
    var isChecked = current.is(':checked');
    if(isChecked) {        
        if(current.hasClass('Ex')) {
            $('.mEx',parentCntr).attr({checked:false,disabled:true});
        }else if(current.hasClass('mEx')) {
            $('.mEx',parentCntr).attr({checked:false});
            current.attr({checked:true});
        }    
    }else{
        if(current.hasClass('Ex')) {
            $('.mEx',parentCntr).attr({disabled:false});
        }
    }
});

我认为复选框所需的行为与其值无关

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

7 个答案: