jQuery選擇多個屬性並選中/取消選中另一個複選框

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][]"> 

其中，[數量]是以二分方式創建的。

例如：如果選中「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); 

    } 
}); 

此代碼的工作，但如果我取消第二行中的複選框，然後複選框在第一行，將取消選中太：

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

注：在頂部聲明

1. 變量因此T哎不必與每個複選框重新申報單擊

2. 的jsfiddle增加了禁止F和PR時DPH檢查（否則檢查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 ]

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

我認爲chekboxes的要求的行爲有什麼用thier值做