jquery checkbox operation help needed

Question

I don't how to do the coding in jquery for checkbox

<p class="list">
  <label for="chkSunday"><input type="checkbox" checked   name="chkday" id="chkday0" value="0" />All days</label>
  <label for="chkSunday"><input type="checkbox"  name="chkday" id="chkday1" value="1"  />Sunday</label>
  <label for="chkMonday"><input type="checkbox"  name="chkday" id="chkday2" value="2" />Monday</label>
  <label for="chkTuesday"><input type="checkbox"  name="chkday" id="chkday3" value="3" />Tuesday</label>
  <label for="chkWednesday"><input type="checkbox"  name="chkday" id="chkday4" value="4"  />Wednesday</label>
  <label for="chkThursday"><input type="checkbox"  name="chkday" id="chkday5" value="5" />Thursday</label>
  <label for="chkFriday"><input type="checkbox"  name="chkday" id="chkday6" value="6" />Friday</label>
  <label for="chkSaturday"><input type="checkbox"  name="chkday" id="chkday7" value="7"  />Saturday</label>
</p>

In above check boxes I have some use cases:

Usecase 1
- User selected any of the day then "all" check box should uncheck
Use case 2
- User unchecked all days then "all" check box should checked

I dont know how to handle this in jQuery.

Nick Craver · Accepted Answer · 2010-11-28 12:47:54Z

2

I think this is what you're after:

$(".list :checkbox").change(function() {
  if(this.id == "chkday0") $(".list :checkbox:gt(0)").attr("checked", false);
  $("#chkday0").attr("checked", $(".list :checkbox:gt(0):checked").length == 0);
});

You can test it out here. What this is doing is rigging up a change handler to every checkbox in that <p>.

If it's the first (all), clear all the other days.
No matter which one it was, check the first if none others are selected (check All if no days).

Also note in the demo the <label> elements changed...they had invalid for attributes, and since they wrap the <input> they go with, you can just remove the for anyway.

answered Nov 28, 2010 at 12:47

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:04:14Z

1

This is pretty similar to @Nick's answer, but avoids some of the DOM selection. It assumes a static group of elements.

Example: http://jsfiddle.net/patrick_dw/7UwLU/

var $allBoxes = $('p.list input:checkbox').change(function() {
    var $dayBoxes = $allBoxes.slice(1);
    if ($allBoxes[0].checked) $dayBoxes.not(this).attr('checked', '');
    $allBoxes[0].checked = !$dayBoxes.filter(':checked').length;
});

No need to change the accepted answer. Just showing another way.

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Nov 28, 2010 at 13:08

user113716

323k64 gold badges454 silver badges441 bronze badges

1 Comment

user113716 Over a year ago

@Elankeeran - You're welcome. Just throwing this one into the mix. :o)

Collectives™ on Stack Overflow

jquery checkbox operation help needed

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related