HTML checkbox handling

Question

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.

I have the capability to, I just have no idea what direction to start in — privatestaticint, Oct 15 '14 at 19:51
Are you sure you are solving the right problem? Checkboxes are supposed to be on/off choices, and if none of a set of checkboxes is selected, well, none is selected—no reason to have a “No stuff” alternative. If you wish to have control that unchecks all checkboxes in a set, it would most logically be a push button, not a checkbox. — Jukka K. Korpela, Oct 15 '14 at 21:36

score 1 · Answer 1 · answered Oct 15 '14 at 20:05

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

score 0 · Answer 2 · answered Oct 15 '14 at 19:58

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>

score 0 · Answer 3 · answered Oct 15 '14 at 20:01

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

score 0 · Answer 4 · edited May 23 '17 at 10:25

0

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?

edited May 23 '17 at 10:25

Community

1
1

answered Oct 15 '14 at 20:05

Tim

4,051
10
36
60

I think you meant same `class`, not `id` – Alexandru Severin Oct 15 '14 at 20:10

score 0 · Answer 5 · answered Oct 15 '14 at 20:05

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

HTML checkbox handling

5 Answers5