CODEWITHSUNDEEP
jquery
Adrian
Adrian

Reputation: 2656

jQuery select multiple attributes and check/uncheck another checkbox

How I can identify following checkboxes in different rows and check/uncheck 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 dinamically created.

Example: If "F" is checked, uncheck "PR". If "PR" is checked, uncheck "F". If "DPH" is checked, uncheck all.

    $(":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 is working, but if I deselect checkbox in the second row, then checkbox in first row will be unchecked too:

enter image description here

Upvotes: 8

Views: 3985

Answers (7)

Sumit Kumar
Sumit Kumar

Reputation: 1902

did this in 10 minutes

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

I think that the required behaviour of chekboxes has nothing to do with thier values

Upvotes: 1

Abhijith A C
Abhijith A C

Reputation: 530

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

Upvotes: 1

cssyphus
cssyphus

Reputation: 40068

This will do what you have 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:

  1. Variables declared at top so they need not be re-declared with each checkbox click

  2. jsFiddle adds disabling F and PR when DPH is checked (otherwise after checking the DPH box user can THEN check either PR or F).

  3. Not necessary to query your checkboxes as groups (as suggested by previous responder)

  4. If difficult to follow, this line can be broken up 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 ]

Upvotes: 6

Elie Andraos
Elie Andraos

Reputation: 86

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

<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 whatever dom elements you have for your styling and structure, but the important is to have a wrapper (div.row in my case)

Now use the following 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>

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

Upvotes: 1

user2121189
user2121189

Reputation: 80

Like this:

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

Upvotes: 1

gthacoder
gthacoder

Reputation: 2351

Try this:

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

Upvotes: 1

Kevin B
Kevin B

Reputation: 95018

The API example uses quotes to fix 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/

Upvotes: 4

Related Questions