jQuery wählen Sie mehrere Attribute und aktivieren/deaktivieren Sie ein anderes Kontrollkästchen

Question

Wie kann ich die folgenden Kontrollkästchen in verschiedenen Zeilen identifizieren und aktivieren/deaktivieren Sie sie separat.

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

wobei [Nummer] dynamisch erstellt wird.

Beispiel: Wenn "F" markiert ist, deaktivieren Sie "PR". Wenn "PR" aktiviert ist, deaktivieren Sie "F". Wenn "DPH" aktiviert ist, deaktivieren Sie alle.

$(":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); 

    } 
}); 

Dieser Code funktioniert, aber wenn ich Checkbox in der zweiten Zeile deaktivieren, dann Checkbox in der ersten Reihe wird nicht aktiviert sein:

Answer 1

Dies wird tun, was Sie angefordert haben:

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

Hinweise:

1. Variablen oben erklärt so t hey muss nicht mit jedem Kontrollkästchen klicken Sie erneut erklärt

2. jsFiddle fügt deaktivieren F und PR bei DPH geprüft (sonst nach dem DPH-Box Benutzer überprüft dann überprüfen kann entweder PR oder F).

3. Nicht erforderlich Ihre Kontrollkästchen als Gruppen abfragen (wie durch vorherige Responder vorgeschlagen)

4. Wenn schwierig zu folgen, kann diese Linie in drei Linien unterteilt werden:
   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

Das API Beispiel verwendet Anführungszeichen um dieses Problem zu beheben .

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

Und alle von ihnen zu wählen, unabhängig von der dynamischen Zahl, verwenden attr^=value

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

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

Answer 3

starten:

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

Answer 4

So:

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

Answer 5

Sie müssen die Kontrollkästchen, um wickeln zu können, um sie als Gruppen abfragen, vereinfachte ich Markup dazu:

<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> 

Sie Ihre Etiketten noch hinzufügen können, und was auch immer dom Elemente, die Sie haben für Ihre Styling und Struktur, aber die wichtig ist, eine Umhüllung (div.row in meinem Fall)

nun das folgende Skript verwenden haben:

<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> 

Dies sollte es tun :) Sie können immer noch die .isChecked(), .check() und .uncheck() auf einem anderen Kontrollkästchen in Ihrem Dokument (so müssen Sie sich nicht wiederholen)

Answer 6

Kontrolle dieses JSFiddle Example

HTML-Code

<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 Code

$(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

tat dies in 10 Minuten

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

Ich denke, dass das erforderliche Verhalten von chekboxes nichts mit thier Werte