0

Desired Behaviour

On changing the checked status of a checkbox, I want to remove or add a class.

I have the functionality for the logic working, but am having trouble traversing and targeting a specific li and making style changes.

HTML

<div class="one">
    <div class="two">
        <p>31</p>
        <div class="three">
            <table>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox" class="css-checkbox" id="checkboxG1" name="checkboxG1">
                            <label class="css-label" for="checkboxG1">area_01 - click me</label>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="four">
        <ul>
            <li class="area_01 common"></li>
            <li class="area_02 common"></li>
            <li class="area_03 common"></li>
            <li class="area_04 common"></li>
            <li class="area_05 common"></li>
            <li class="area_06 common"></li>
        </ul>
    </div>
</div>

jQuery

The following is my last attempt after a series of failed attempts using next().

I'm either messing up my traversing, or I'm not using removeClass() correctly. 

$("input.css-checkbox:checkbox").change(function () {
    if (this.checked) {
        // remove a class
        //var myVar = $(this).next($("li.area_01"));
        var myVar = $(this).parent().parent().parent().find(".four").find("li.area_01");
        myVar.removeClass("common");
    } else if (!this.checked) {
        // add a class
        var myVar = $(this).parent().parent().parent().find(".four").find("li.area_01");
        myVar.addClass("common");
    }
});

jsFiddle

http://jsfiddle.net/rwone/fns87knc/

Update: I should add that there will be a number of lists with the same classes, and therefore I need to specifically target "the next instance of this class from where I am clicking".

user1063287
  • 10,265
  • 25
  • 122
  • 218

3 Answers3

2

You can use find() method after traversing to div.one using parents(). But this way is little bit slow.

$("input.css-checkbox:checkbox").change(function() {
  if (this.checked) {
    // remove a class
    //var myVar = $(this).next($("li.area_01"));
    var myVar = $(this).parents(".one").find(".four").find("li.area_01");
    myVar.removeClass("common");
  } else if (!this.checked) {
    // add a class
    var myVar = $(this).parents(".one").find(".four").find("li.area_01");
    myVar.addClass("common");
  }
});

/* 

Desired Behaviour

On checking the checkbox, the first li's background should change to green.  

On unchecking the checkbox, the first li's background should change back to grey.  

*/
.area_01,
.area_02,
.area_03,
.area_04,
.area_05,
.area_06 {
  width: 100px;
  height: 20px;
}
.area_01 {
  background: green;
}
.area_02 {
  background: cyan;
}
.area_03 {
  background: yellow;
}
.area_04 {
  background: fuchsia;
}
.area_05 {
  background: purple;
}
.area_06 {
  background: lime;
}
li {
  margin-bottom: 5px;
}
.area_01.common,
.area_02.common,
.area_03.common,
.area_04.common,
.area_05.common,
.area_06.common {
  background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="one">
  <div class="two">
    <p>31</p>
    <div class="three">
      <table>
        <tbody>
          <tr>
            <td>
              <input type="checkbox" class="css-checkbox" id="checkboxG1" name="checkboxG1">
              <label class="css-label" for="checkboxG1">area_01 - click me</label>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="four">
    <ul>
      <li class="area_01 common"></li>
      <li class="area_02 common"></li>
      <li class="area_03 common"></li>
      <li class="area_04 common"></li>
      <li class="area_05 common"></li>
      <li class="area_06 common"></li>
    </ul>
  </div>
</div>
John R
  • 2,741
  • 2
  • 13
  • 32
0

DEMO

$("input.css-checkbox:checkbox").change(function () {
    if (this.checked) {
        console.log('checked');
        // remove a class
        //var myVar = $(this).next($("li.area_01"));
        var myVar = $(this).closest(".two").siblings('.four').find(".area_01");
        myVar.removeClass("common");
    } else if (!this.checked) {
        // add a class
        var myVar = $(this).closest(".two").siblings('.four').find(".area_01");
        myVar.addClass("common");
    }
});

/* 

Desired Behaviour

On checking the checkbox, the first li's background should change to green.  

On unchecking the checkbox, the first li's background should change back to grey.  

*/

Try like this.

I selected the parent div with class two using closest() then find the sibling using siblings() that contains the list which is class four then add/remove the class

Community
  • 1
  • 1
guradio
  • 15,524
  • 4
  • 36
  • 57
  • You can use `toggleClass` like `$('.four li:first').toggleClass('area_01', this.checked);`. no need of `if...else` here – Tushar Nov 03 '15 at 06:24
0

If you want to add a class to the li element, you can use the following steps

1.Add the following code to the JS file.This code will add 'common' class to the li element if the checkbox is checked otherwise will remove that class.

jQuery("input.css-checkbox:checkbox").change(function () {
        if (this.checked) {
            jQuery('.four ul li').addClass('common');
        }
        else
        {
           jQuery('.four ul li').removeClass('common');
        }
    });

2.Write the following statement in your CSS file.

.common{
    background: red;
}
  1. After doing this remove the 'common' class from the li element, since we will be adding or removing it dynamically.

To check this example please refer this link- http://jsfiddle.net/r4zokodb/

Domain
  • 11,562
  • 3
  • 23
  • 44