JGeer
JGeer

Reputation: 1852

Add class and change inner HTML when checkbox is checked

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/

Upvotes: 1

Views: 3524

Answers (3)

Mehdi Souregi
Mehdi Souregi

Reputation: 3265

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>

Upvotes: 0

Amir H. Bagheri
Amir H. Bagheri

Reputation: 1426

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>

Upvotes: 1

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

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/

Upvotes: 2

Related Questions