Question

我是JS的新手。当我尝试更改checkbox.checked === true的文本样式时，只想帮助我们弄清楚为什么我的逻辑是错误的。

这里是code。

JS：

var c = document.getElementById("cbx");
var l = document.getElementById("cbxtxt");

if ( c.checked === true ) {
  l.style.textDecoration = "line-through";
}

HTML：

<html>
  <head></head>
  <body>
    <input type="checkbox" id="cbx">
    <label for="cbx" id="cbxtxt">Shaneningans</label>
    //<script type="text/javascript" src="cbx_test.js"></script>
  </body>
</html>

谢谢！

Answer 1

您需要将逻辑包装在event listener中，以使其在每次选中/取消选中复选框时都运行。另外，您可能想处理未选中此复选框时发生的情况。

var c = document.getElementById("cbx"); // for checbox
var l = document.getElementById("cbxtxt"); // for label

c.addEventListener("change", function() {
  l.style.textDecoration = c.checked ? "line-through" : "none";
})

<input type="checkbox" id="cbx">
<label for="cbx" id="cbxtxt">Shaneningans</label>

解释这一行：

l.style.textDecoration = c.checked ? "line-through" : "none"

正如其他人所说，c.checked === true并不是必须的，因为您可以直接使用c.checked作为条件。为了使代码更简洁，我使用了conditional operator（?:）而不是if / else。

最后，只是为了演示@A. Wolff使用纯CSS的建议如何工作：

#cbx:checked~label {
  text-decoration: line-through;
}

<input type="checkbox" id="cbx">
<label for="cbx" id="cbxtxt">Shaneningans</label>

Answer 2

您需要订阅复选框的change事件，否则您的代码仅在解析<script>元素时运行一次。

考虑一下：

var c = document.getElementById("cbx"); // for checbox
var l = document.getElementById("cbxtxt"); // for label

c.addEventListener('change', function(evt) { 
  //this anonymous function will run each time the checkbox changes state
  if (c.checked === true) {
    l.style.textDecoration = "line-through";
  } else {
    l.style.textDecoration = "";
  }
});

Answer 3

您需要添加事件监听器

var l = document.getElementById("cbxtxt"); // for label
var c = document.getElementById("cbx"); // for checbox

c.addEventListener('change', (event) => {
  if (event.target.checked) {
    console.log('checked')
    l.style.textDecoration = "line-through";
  } else {
    console.log('not checked')
     l.style.textDecoration = "blink";
  }
})

Answer 4

您宁愿使用classes而不是id属性。

我想您需要显示不同的复选框，以确保您的情况下必须具有不同的ID（不建议在页面上使用相同的ID）。

这就是为什么您可以使用我的代码段弄清楚如何使用多个复选框的原因。

var checkboxes = document.querySelectorAll(".my-form .my-custom-checkbox-class"); // Search all checkboxes in the form

for (var checkBox of checkboxes) {
  checkBox.addEventListener("change", onCheckboxChangeHandler, false);  // Add event listener to each checkbox
}

function onCheckboxChangeHandler(e) {
  var clickedCheckbox = this
  var formGroupContainer = clickedCheckbox.closest('.form-group');   // Find closest parent element with class .form-group
  var label = formGroupContainer.querySelector('.my-custom-lbl-class');   // Find label closest to clicked checkbox
  label.style.textDecoration = clickedCheckbox.checked ? "line-through" : "none"; //Do everything you need with styles
}

.my-form {
  padding: 20px;
}

.form-group {
  padding: 5px 10px;
  font-size: 18px;
}

<div class="my-form">
        <div class="form-group">
            <input type="checkbox" id="cb1" class="my-custom-checkbox-class">
            <label for="cb1" class="my-custom-lbl-class">Waterfall</label>
        </div>

        <div class="form-group">
            <input type="checkbox" id="cb2" class="my-custom-checkbox-class">
            <label for="cb2" class="my-custom-lbl-class">River</label>
        </div>
    </div>

为什么我的逻辑是错误的？复选框和直通

4 个答案: