我想在类"related-box-check"
的上部div中添加/删除一个类,并在选中复选框时更改标签的内部HTML。当再次取消选中该框时,应将其删除(恢复为默认值)。我的checkbox-id是动态生成的。
我怎样才能做到这一点?
我的HTML看起来像这样:
<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/
答案 0 :(得分:2)
这将满足您的需求......
$(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);
});
}
});
});
它找到每个复选框并添加一个更改事件处理程序,每次复选框值更改时都会执行该处理程序。检查时,代码会找到与类.related-box-check
(父div)最接近的父元素,并添加类new-class
,然后更改标签的html(存储原始值后)。然后,当您取消选中该复选框时,它将取消所有这些 - 将标签设置回其原始值并删除添加的类。
这是一个更新的jsfiddle,显示它在行动......
答案 1 :(得分:1)
这是一个纯粹的JavaScript代码。我在父元素中放置了一个目标元素,以确保无论你在目标元素中做什么,它都不会受到影响。
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!"
}
}
&#13;
<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>
&#13;
答案 2 :(得分:0)
隐藏/显示你的div元素:
<script>
$("input[type=checkbox]").click(function(){
if(this.checked)
$(".related-box-check").show(); // checked
else
$(".related-box-check").hide();
})
</script>