CODEWITHSUNDEEP
javascriptjqueryhtml
parkway
parkway

Reputation: 276

Changing class for the <li> when checkbox of each <li> is checked

Im working on the li which contain checkbox for each list-item-group. When i click on the checkbox in each of the list, it should addClass for the list but it addClass for all of my list even i only checked one of the checkbox. here is my code. I want addclass only applied on itself li instead of applying all addclass to all the li

<ul class="sortable-list taskList list-unstyled ui-sortable">
        <li class="ui-sortable-handle">
            <div class="checkbox checkbox-custom checkbox-single pull-right">
                <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
                <label>Normal</label>
            </div>
            No.1
        </li>
        <li class="ui-sortable-handle">
            <div class="checkbox checkbox-custom checkbox-single pull-right">
                <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
                <label>Normal</label>
            </div>
            No.2
        </li>
        <li class="ui-sortable-handle">
            <div class="checkbox checkbox-custom checkbox-single pull-right">
                <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
                <label>Normal</label>
            </div>
            No.3
        </li>
    </ul>

and this is my jquery

<script>
    $('input.cbx').on('change', function () {
        if ($(this).is(":checked")) {
            $('.ui-sortable li').addClass("task-warning");
        } else {
            $('.ui-sortable li').removeClass("task-warning");
        }
    });
</script>

Upvotes: 1

Views: 398

Answers (3)

Nick
Nick

Reputation: 147216

You need to find the closest li element to $(this) to apply the class to:

    $('input.cbx').on('change', function () {
        if ($(this).is(":checked")) {
            $(this).closest('li').addClass("task-warning");
        } else {
            $(this).closest('li').removeClass("task-warning");
        }
    });
.task-warning { background-color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sortable-list taskList list-unstyled ui-sortable">
        <li class="ui-sortable-handle">
            <div class="checkbox checkbox-custom checkbox-single pull-right">
                <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
                <label>Normal</label>
            </div>
            No.1
        </li>
        <li class="ui-sortable-handle">
            <div class="checkbox checkbox-custom checkbox-single pull-right">
                <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
                <label>Normal</label>
            </div>
            No.2
        </li>
        <li class="ui-sortable-handle">
            <div class="checkbox checkbox-custom checkbox-single pull-right">
                <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
                <label>Normal</label>
            </div>
            No.3
        </li>
    </ul>

Upvotes: 3

Nidhin Joseph
Nidhin Joseph

Reputation: 10237

You need to $(this).addClass("task-warning"); to get that particular checkbox.

$('input.cbx').on('change', function() {
  if ($(this).is(":checked")) {
    $(this).parent().addClass("task-warning");
    // $(this).closest('li').addClass("task-warning"); for li
  } else {
    $(this).parent().removeClass("task-warning");
    // $(this).closest('li').removeClass("task-warning"); for li
  }
});
.task-warning {
  background: orange;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<ul class="sortable-list taskList list-unstyled ui-sortable">
  <li class="ui-sortable-handle">
    <div class="checkbox checkbox-custom checkbox-single pull-right">
      <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
      <label>Normal</label>
    </div>
    No.1
  </li>
  <li class="ui-sortable-handle">
    <div class="checkbox checkbox-custom checkbox-single pull-right">
      <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
      <label>Normal</label>
    </div>
    No.2
  </li>
  <li class="ui-sortable-handle">
    <div class="checkbox checkbox-custom checkbox-single pull-right">
      <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
      <label>Normal</label>
    </div>
    No.3
  </li>
</ul>

Upvotes: 0

Sam Malcolm
Sam Malcolm

Reputation: 3

That is expected as the selector you are using .ui-sortable li selects all li items inside of the list. You need to refactor how your code works. I would recommend looping through the list and removing the class when its not checked. Something like this:

(PS. I dont know Jquery too well so i wrote it in vanilla JavaScript)

$('input.cbx').on('change', function () {
        let list_items = document.querySelectorAll(".ui-sortable li");
        for (let i = 0; i < list_items.length; i++) {
            if (list_items[i].childNodes[1].childNodes[1].checked) {
                list_items[i].classList.add("task-warning")
            } else {
                list_items[i].classList.remove("task-warning")
            }
        }
    });

Upvotes: 0

Related Questions