添加/删除多个列表项的类

Question

I have a 'select all' and 'deselect all' button which when clicked should either add or remove the class 'hour-selected' to all list items. I can't seem to get it to do anything.

In this example I need to add/remove the class for all li 's within #hour-selected-mon . dayID returns hour-selected-mon li which I believe is what I want.

html example:

<div id="day1" class="col-md-12 margin-bottom-20">
    <label class="f-13">Select active hours for <b>Monday</b> :</label>
    <div class="clearfix margin-top-10 margin-bottom-10">
        <button type="button" class="btn btn-sm btn-primary hourSelect">Select All</button>
        <button type="button" class="btn btn-sm btn-primary hourDeselect">Deselect All</button>
    </div>
    <ol id="hour-selected-mon" class="hour-select clearfix">
        <li class="<?php echo $hours1['12a'] == 1 ? 'hour-selected' : ''; ?>">12am</li>
        <li class="<?php echo $hours1['1a'] == 1 ? 'hour-selected' : ''; ?>">1am</li>
        <li class="<?php echo $hours1['2a'] == 1 ? 'hour-selected' : ''; ?>">2am</li>
        <li class="<?php echo $hours1['3a'] == 1 ? 'hour-selected' : ''; ?>">3am</li>
        <li class="<?php echo $hours1['4a'] == 1 ? 'hour-selected' : ''; ?>">4am</li>
        <li class="<?php echo $hours1['5a'] == 1 ? 'hour-selected' : ''; ?>">5am</li>
        <li class="<?php echo $hours1['6a'] == 1 ? 'hour-selected' : ''; ?>">6am</li>
        <li class="<?php echo $hours1['7a'] == 1 ? 'hour-selected' : ''; ?>">7am</li>
        <li class="<?php echo $hours1['8a'] == 1 ? 'hour-selected' : ''; ?>">8am</li>
        <li class="<?php echo $hours1['9a'] == 1 ? 'hour-selected' : ''; ?>">9am</li>
        <li class="<?php echo $hours1['10a'] == 1 ? 'hour-selected' : ''; ?>">10am</li>
        <li class="<?php echo $hours1['11a'] == 1 ? 'hour-selected' : ''; ?>">11am</li>
        <li class="<?php echo $hours1['12p'] == 1 ? 'hour-selected' : ''; ?>">12pm</li>
        <li class="<?php echo $hours1['1p'] == 1 ? 'hour-selected' : ''; ?>">1pm</li>
        <li class="<?php echo $hours1['2p'] == 1 ? 'hour-selected' : ''; ?>">2pm</li>
        <li class="<?php echo $hours1['3p'] == 1 ? 'hour-selected' : ''; ?>">3pm</li>
        <li class="<?php echo $hours1['4p'] == 1 ? 'hour-selected' : ''; ?>">4pm</li>
        <li class="<?php echo $hours1['5p'] == 1 ? 'hour-selected' : ''; ?>">5pm</li>
        <li class="<?php echo $hours1['6p'] == 1 ? 'hour-selected' : ''; ?>">6pm</li>
        <li class="<?php echo $hours1['7p'] == 1 ? 'hour-selected' : ''; ?>">7pm</li>
        <li class="<?php echo $hours1['8p'] == 1 ? 'hour-selected' : ''; ?>">8pm</li>
        <li class="<?php echo $hours1['9p'] == 1 ? 'hour-selected' : ''; ?>">9pm</li>
        <li class="<?php echo $hours1['10p'] == 1 ? 'hour-selected' : ''; ?>">10pm</li>
        <li class="<?php echo $hours1['11p'] == 1 ? 'hour-selected' : ''; ?>">11pm</li>
    </ol>
</div>

JS:

//toggle for Select All hour selection
$('.hourSelect').on('click', function() {
    var dayID = $(this).parent().next('ol').attr('id')+' li';
    console.log(dayID);
    $(dayID).addClass('hour-selected');
});     

//toggle for Deselect All hour selection
$('.hourDeselect').on('click', function() {
    var dayID = $(this).parent().next('ol').attr('id')+' li';
    console.log(dayID);
    $(dayID).removeClass('hour-selected');
});

EDIT solution :

//toggle for Select All hour selection
$('.hourSelect').on('click', function() {
    var dayID = $(this).parent().next('ol').attr('id');
    $('#' + dayID + ' li').addClass('hour-selected');
});     

//toggle for Deselect All hour selection
$('.hourDeselect').on('click', function() {
    var dayID = $(this).parent().next('ol').attr('id');
    $('#' + dayID + ' li').removeClass('hour-selected');
});

I was missing the # for the ID value. Many of you added replies, but none which would work correctly. #hour-selected-mon is in my example, however, there will also be #hour-selected-tue, #hour-selected-wed, .... #hour-selected-sun which is why I am grabbing the ol's ID for use.

Answer 1

You can't add or remove class, becouse, you don't put "#" and selector not found. Without "#" selector look "hour-selected-mon li".

$("#" + dayID).removeClass('hour-selected');

Answer 2

Don't use .on

Uncaught TypeError: Object [object Object] has no method 'on' 

Just use click. http://jsfiddle.net/H73VU/

Answer 3

Isn't a point or some sign at the very beginning of your string missing? If you want to select all these classes, you should add ".".

Answer 4

Use this in your select all function:

$('.hour-select > li').toggleClass('hour-selected', true);

And in your deselect, change true to false.