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

【问题标题】：Add class and change inner HTML when checkbox is checked选中复选框时添加类并更改内部 HTML
【发布时间】：2017-08-03 16:37:09
【问题描述】：

我想在上面的 div 中添加/删除一个类 "related-box-check" 并在选中复选框时更改标签的内部 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/

【问题讨论】：

你应该展示你到目前为止所尝试的内容

标签： javascript jquery html css checkbox

【解决方案1】：

这将满足您的需求...

$(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 显示它的实际应用......

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

【讨论】：

【解决方案2】：

这是一个纯 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!"
  }
}

<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>

【讨论】：

【解决方案3】：

隐藏/显示您的 div 元素：

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

【讨论】：