Change label css of checked checkbox

Question

I'm trying to change the css of the following label using JQuery but I can't figure it out. This is actually the html from my checkboxlist (asp.net) and this is what I have so far. Can anybody please help? Thank you.

The JQuery below finds the entire table and makes all labels red, not just the one that I checked.

$("#CheckBoxList1").click(function() {
    $(this).find('label').removeClass('red');
    if ($('span').hasClass('checked'))
        $(this).find('label').addClass('red');
});

<table id="CheckBoxList1" border="0">
  <tbody>
    <tr>
      <td>
        <div class="checker" id="uniform-CheckBoxList1_0">
          <span>
            <input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" style="opacity: 0; "/>
          </span>
        </div>
        <label for="CheckBoxList1_0">Mark Park</label>
      </td>
      <td>
        <div class="checker" id="uniform-CheckBoxList1_1">
          <span>
            <input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" style="opacity: 0; "/>
          </span>
        </div>
        <label for="CheckBoxList1_1">Amy Lee</label>
      </td>
      <td/>
    </tr>
  </tbody>
</table>

Challe · Accepted Answer · 2011-11-15 18:17:00Z

1

$("#CheckBoxList1").click(function() {
    $(this).find('label').removeClass('red');
    $('span.checked').parent().next('label').addClass('red');
});

answered Nov 15, 2011 at 18:17

Challe

90613 silver badges27 bronze badges

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

Comments

Colin Bayer · Accepted Answer · 2011-11-15 18:15:22Z

0

Can you add an class/id to the labels and checkboxes and access it that way:

 $(".check").click(function() {
   var id = $(this).attr("id").split("_");
    //access array of id
   $(".label_"+id[1]).addClass("red");
 }

then add the id/ classes onto your html:

<input id="CheckBoxList1_0" id="check_1" type="checkbox" class="check" name="CheckBoxList1$0" style="opacity: 0; "/>

<label for="CheckBoxList1_0" id="label_1">Mark Park</label>

answered Nov 15, 2011 at 18:15

Colin Bayer

12 bronze badges

1 Comment

Colin Bayer Over a year ago

sorry, the event for checkboxes is "change" not "click". then you'd probably need to detect whether it's checked or unchecked at that point.

James Johnson · Accepted Answer · 2011-11-15 18:22:10Z

0

Try something like this:

$("label[for='comedyclubs']").toggleClass("red");

answered Nov 15, 2011 at 18:22

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

Collectives™ on Stack Overflow

Change label css of checked checkbox

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related