Reputation: 1852
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
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
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
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