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.
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
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>
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);
}
});
})
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)
});
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
class, not id