Javascript 选中复选框时添加类并更改内部HTML

我想使用class

“related box check”

将一个类添加/删除到上面的div中，并在选中复选框时更改标签的内部HTML。再次取消选中该框时，应将其删除（返回默认值）。我的复选框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>

添加以供检查

---

JSFIDLE:

这将满足您的需要

$(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复选框

（父div）查找最近的父元素，并添加类

新类

，然后更改标签的html（存储原始值后）。然后，当您取消选中复选框时，它将撤消所有这些操作-将标签设置回其原始值并删除添加的类

下面是一个更新的JSFIDLE，显示了它的作用

---

这是一个纯javascript代码。我在父元素中放置了一个目标元素，以确保无论在目标元素中执行什么操作，它都不会受到影响

函数myFunction（chk）{
var targetElement=document.getElementById（'target-element'）；
console.log（targetElement）
如果（已检查）{
targetElement.innerHTML=“我被选中！”；
}
否则{
targetElement.innerHTML=“我未选中！”
}
}

添加以供检查

要隐藏/显示div元素：

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

$（“输入[type=checkbox]”。单击（函数（）{
如果（选中此项）
$（“.related复选框”）.show（）；//选中
其他的
$（“.related复选框”）.hide（）；
})

您应该展示您迄今为止所做的尝试