Jquery add class to input checkbox field

Question

I would like to make add / remove a class to a div that holds a checkbox.

I am 80% there, though am not sure on the right syntax to look at whether the input item is checked or unchecked. So I can add or remove the class appropriate.

Essentially I know it needs to look like:

if("$thechecks #item-" + req).attr('checked') { 
   $("#item-" + req).addClass("item-select");
} else {
   $("#item-" + req).removeClass("item-select");
}

Any help / thoughts would be really appreciated.

I made a small fiddle of my code to-date.

http://jsfiddle.net/brandrally/vc5wgpk2/

// Javascript //

 $(document).ready(function () {
        $("#thechecks input[type='checkbox']").click(function () {
            var req = $(this).val();
            $("#item-" + req).addClass("item-select");
        });
    });

// HTML //

<div id="thechecks">

<div id="item-1">
<label><input name="element[]" type="checkbox" value="1" > One</label>
</div>

<div id="item-2">
<label><input name="element[]" type="checkbox" value="2" > Two </label>
</div>

</div>

Aditya · Accepted Answer · 2014-12-31 05:46:44Z

5

If I understand your question right, you could use toggleClass()

$(document).ready(function () {
    $("#thechecks input[type='checkbox']").click(function () {
        var req = $(this).val();
        $("#item-" + req).toggleClass("item-select");
    });
});

FIDDLE

answered Dec 31, 2014 at 5:46

Aditya

1,2615 gold badges21 silver badges32 bronze badges

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

1 Comment

Brandrally Over a year ago

I cannot accept it (as I need to wait 10 minutes), though thank you. The toggle class was all i needed!

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Demo here

Try this

Use toggleClass instead of addClass

//  $("#item-" + req).addClass("item-select");
 $("#item-" + req).toggleClass("item-select");

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 31, 2014 at 5:50

I'm Geeker

4,6575 gold badges25 silver badges42 bronze badges

Comments

user2575725 · Accepted Answer · 2014-12-31 05:50:44Z

Try jquery closest and toggleClass:

$(function() {
  $('input[name^=element]').on('change', function(e) {//input name starting with `element`
    e.stopPropagation();
    $(this).closest('div[id^=item]').toggleClass('check', this.checked);
  }).trigger('change');//fire on page load
});

.check {
  background: skyblue;
}

div[id^=item] {
  margin-bottom: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thechecks">

  <div id="item-1">
    <label>
      <input name="element[]" type="checkbox" value="1">One</label>
  </div>

  <div id="item-2">
    <label>
      <input name="element[]" type="checkbox" value="2" checked='checked'>Two</label>
  </div>

</div>

Mangesh Parte · Accepted Answer · 2014-12-31 06:01:13Z

0

Fiddle

Try this one

$(document).ready(function () {
    $("#thechecks input[type='checkbox']").click(function () {
        var req = $(this).val();
        if($("#item-"+req).hasClass("item-select"))
        {
            $("#item-" + req).removeClass("item-select");
        } else {
            $("#item-" + req).addClass("item-select");
        }
    });
});

edited Dec 31, 2014 at 6:01

Mangesh Parte

2,1771 gold badge13 silver badges16 bronze badges

answered Dec 31, 2014 at 5:49

SimarjeetSingh Panghlia

2,21016 silver badges14 bronze badges

Comments

Jackkobec · Accepted Answer · 2018-04-29 18:59:45Z

0

<ui>
<li><label><input id="checkbox2" type="checkbox" />Apple</label></li>
</ui>

//code before
<div id="wr" class="wrapper">
//code after

Add/remove class to the <div id="wr" class="wrapper"> by checkbox click:

<script>
$(document).ready(function(){
    $('#checkbox2').click(function () {
       $('#wr').toggleClass('on');
    });
});
</script>

answered Apr 29, 2018 at 18:59

Jackkobec

6,9871 gold badge42 silver badges39 bronze badges

Collectives™ on Stack Overflow

Jquery add class to input checkbox field

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related