JQuery select multiple attributes and check / uncheck another box

Question

How can I identify the following checkboxes on different lines and check / delete them separately.

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

where [number] is created dynamically.

Example. If "F" is checked, uncheck "PR". If the "PR" checkbox is checked, clear the "F" checkbox. If the "DPH" box is checked, clear the box.

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

This code works, but if I uncheck the box in the second line, then the box in the first line will also be unchecked:

Answer 1

This will do what you requested:

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

Notes:

• Variables declared at the top, so they do not need to be re-declared with every checkbox.

• jsFiddle adds disabling F and PR when checking DPH (otherwise, after checking the DPH field, the user can THEN check PR or F).

• No need to request your flags as a group (as suggested by the previous respondent)

• If it is difficult to follow, this line can be divided into three lines:
  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

The sample API uses quotation marks to resolve this problem.

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

And to select all of them regardless of the dynamic number, use attr^=value

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

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

Answer 3

Try the following:

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

Answer 4

Like this:

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

Answer 5

You need to wrap the checkboxes in order to be able to request them as groups, I simplified your markup:

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

you can still add your labels and any elements of the house that you have for your style and structure, but it is important to have a wrapper (div.row in my case)

Now use the script:

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

That should do it :) You can still use .isChecked () ,. check () and .uncheck () in any other checkbox in your document (so you don't have to repeat it yourself).

Answer 6

check out this 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

did it in 10 minutes

please check out my minimalist approach

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

I think the required behavior of checkboxes has nothing to do with its meanings.