1

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

这是代码。

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>

提前致谢！

4

4 回答 4

4

您需要将逻辑包装在事件侦听器中，以便每次选中/取消选中复选框时它都会运行。此外，您可能想要处理未选中复选框时发生的情况。

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用作您的条件。为了使代码更简洁，我使用条件运算符( ?:) 而不是if/ else。

最后，只是为了演示@A. Wolff使用纯 CSS 的建议可行：

#cbx:checked~label {
  text-decoration: line-through;
}
<input type="checkbox" id="cbx">
<label for="cbx" id="cbxtxt">Shaneningans</label>

于 2019-03-15T13:03:08.347 回答
1

您需要订阅复选框的事件，否则您的代码仅在解析元素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 = "";
  }
});
于 2019-03-15T13:03:27.963 回答
0

你需要添加事件监听器

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";
  }
})
于 2019-03-15T13:09:26.860 回答
0

您宁愿使用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>

于 2019-03-15T13:35:24.700 回答