Add class and change inner HTML when checkbox is checked

Question

I want to add/remove a class to the upper div with class "related-box-check" and change the inner HTML of the label, when the checkbox is checked. It should be removed (back to default), when the box is unchecked again. My checkbox-id is generated dynamically.

How can I achieve that?

My HTML looks like this:

<div class="related-box-check">
<input type="checkbox" class="checkbox related-checkbox" id="related-checkbox162569" name="related_products[]" value="162569">
<label class="label-related" for="related-checkbox162569">Add for check</label>
</div>

JSFiddle: https://jsfiddle.net/ws7wk19g/

You should show what you tried so far

Ruhul Amin
– Ruhul Amin

2017-03-13 15:31:17 +00:00
Commented Mar 13, 2017 at 15:31 — Ruhul Amin
– Ruhul Amin, Commented Mar 13, 2017 at 15:31

Reinstate Monica Cellio · Accepted Answer · 2017-03-13 15:33:55Z

This will do what you need...

$(function() {  // document.ready handler

  $("input[type=checkbox]").on("change", function() {
    if (this.checked) {
      $(this)
        .closest(".related-box-check")
        .addClass("new-class")
        .find(".label-related").each(function() {
          var $this = $(this);
          $this.data("original-inner-html", $this.html());
          $this.html("Some new text because you checked the box!");
        });
    }
    else {
      $(this)
        .closest(".related-box-check")
        .removeClass("new-class")
        .find(".label-related").each(function() {
          var $this = $(this);
          var original = $this.data("original-inner-html");
          $this.html(original);
        });
    }
  });

});

It finds each checkbox and adds a change event handler, which is executed every time a checkbox value changes. When it is checked, the code finds the closest parent element with the class .related-box-check (the parent div) and adds the class new-class and then changes the label's html (after storing the original value). Then when you untick the checkbox, it undoes all of that - sets the label back to its original value and removes the added class.

Here's an updated jsfiddle showing it in action...

https://jsfiddle.net/ws7wk19g/9/

Amir H. Bagheri · Accepted Answer · 2017-03-13 15:36:04Z

This is a pure javascript code. I have put a target element inside the parent element to ensure that regardless of what you do inside the target element, it wouldn't be affected.

function myFunction(chk) {
var targetElement = document.getElementById('target-element');
console.log(targetElement)
  if (chk.checked){
     targetElement.innerHTML= "I am checked!";
  }
  else{
    targetElement.innerHTML="I am unchecked!"
  }
}

<div class="related-box-check">
<input type="checkbox" class="checkbox related-checkbox" id="related-checkbox162569" onchange="myFunction(this)" name="related_products[]" value="162569" >
<label class="label-related" for="related-checkbox162569">Add for check</label>
<div id="target-element">
</div>
</div>

Mehdi Souregi · Accepted Answer · 2017-03-13 15:39:03Z

0

To hide/show your div element :

<script>
$("input[type=checkbox]").click(function(){
if(this.checked)
    $(".related-box-check").show();  // checked
else
    $(".related-box-check").hide();
})
</script>

answered Mar 13, 2017 at 15:39

Mehdi Souregi

3,2735 gold badges40 silver badges58 bronze badges

Collectives™ on Stack Overflow

Add class and change inner HTML when checkbox is checked

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related