CODEWITHSUNDEEP
javascripthtml
privatestaticint
privatestaticint

Reputation: 864

HTML checkbox handling

So I have a group of checkboxes like this:

[x] No stuff
[ ] Stuff 1
[ ] Stuff 2
[ ] Stuff 3

When any of the stuff checkboxes are clicked, I want the "No Stuff" one automatically deselected. Also, I would like everything to be deselected if "No stuff" gets selected.

Can someone point me in the right direction? Thanks.

Upvotes: 0

Views: 180

Answers (5)

Tim
Tim

Reputation: 4101

If you give them all the same class, you can uncheck the first with ordinal 0 when any of the others are clicked.

You can also uncheck/check options by looping through the collection and setting the properties. This is the easy way to check or uncheck multiple options.

How to uncheck a group of checkboxes when another checkbox is checked

Check/Uncheck checkbox with javascript?

Upvotes: 0

j08691
j08691

Reputation: 207901

This should do what you need:

$('input[name="noStuff"]').change(function () {
    if ($(this).is(":checked")) $('input[name^="stuff"]').prop('checked', false)
})
$('input[name^="stuff"]').change(function () {
    $('input[name="noStuff"]').prop('checked', !$('input[name^="stuff"]:checked').length)
});

jsFiddle example

Upvotes: 0

Subha
Subha

Reputation: 1051

Give some similar ids to the stuff check boxes - like "chkStuff1", "chkStuff2", "chkStuff3" and give one onclick function to each like - onclick = "StuffClicked(this);" - same for all. Lets say, the No Stuff check box has an id - "chkNoStuff"

then try this code - 

function StuffClicked(chkBoxObj) {

  var isNoStuffChecked = true;

  if($('#chkBoxObj').is(':checked')) {
     $('#chkNoStuff').prop('checked', false);
  }

  else {
     $('[id^="chkStuff"]').each(function(){
       if($(this).is(':checked')) {
         isNoStuffChecked = false;
         break;
       }
     });
  }

  $('#chkNoStuff').prop('checked', isNoStuffChecked );
}


$('#chkNoStuff').unbind('click').bind('click', function(){
  $('[id^="chkStuff"]').each(function(){
    $(this).prop('checked', false);
  });
});

Hope this helps

Upvotes: 1

Harutyun Abgaryan
Harutyun Abgaryan

Reputation: 2023

Use This 

<input type="checkbox" id="all" />
<input type="checkbox" class="a" />
<input type="checkbox" class="a" />
<input type="checkbox" class="a" />

jquery

jQuery('#all').click(function(){
 var that =$(this);
    jQuery('.a').each(function(v){
        if (that.is(':checked')){
   $(this).attr('disabled', true);
        }else{
           $(this).attr('disabled', false);
        }
    });
})

click here for see

Upvotes: 0

Levi Beckman
Levi Beckman

Reputation: 533

Fiddle: WORKING DEMO

    <label><input type="checkbox" class="jsNoStuff" /> No Stuff</label><br />
    <label><input type="checkbox" class="jsStuff" /> Stuff 1</label><br />
    <label><input type="checkbox" class="jsStuff" /> Stuff 2</label><br />
    <label><input type="checkbox" class="jsStuff" /> Stuff 3</label><br />
    <label><input type="checkbox" class="jsStuff" /> Stuff 4</label><br />

    <script type="text/javascript">
        jQuery(function ($) {
            var $jsNoStuff = $('.jsNoStuff');
            var $jsStuff = $('.jsStuff');
            var fClickStuff = function () {
                $jsNoStuff.prop('checked', false);
            };
            var fClickNoStuff = function () {
                if ($jsNoStuff.is(':checked')) {
                    $jsStuff.prop('checked', false);
                }
            };
            $jsNoStuff.click(fClickNoStuff);
            $jsStuff.click(fClickStuff);
        });
    </script>

Upvotes: 0

Related Questions