javascript 仅适用于一个元素，仅适用于第一个

Question

我的页面上有多个复选框按钮元素，每当有人点击它们时，它们的颜色和文本都会改变，我可以用 CSS 做到这一点，但我想改变图标在复选框按钮中，所以我在我的 HTML 代码中使用 javascript 但是当我运行脚本它只适用于一个元素，只有第一个，所以这意味着只有图标更改了第一个复选框按钮，但它不适用于所有其他按钮，我试图为所有复选框按钮提供唯一 ID，但我仍然遇到同样的问题

这是未选中时的复选框 1 和 2

选中时这是复选框 1 和 2

这是我运行执行的代码：

 document.getElementById ('checkbox').addEventListener ('click', function (ev) {
    document.getElementById('icon').classList[ ev.target.checked ? 'add' : 'remove'] ('fa-circle-check');
  }, false);

.select{
  margin: 4px;
  background-color: #06213B;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.select label {
  float: left; line-height: 4.0em;
  width: 26.0em; height: 4.0em;
}

.select label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.select label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

/* selects all of the text within the input element and changes the color of the text */
.select label input + span{color: #fff;
    font-size: 19px;
    font-weight: 500;
    font-family: default;
}


/* This will declare how a selected input will look giving generic properties */
.select input:checked + span {
    color: #ffffff;
    text-shadow: 0 0  0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.select input:checked + span{background-color: #78E821;}

input[type="checkbox"] + span:after{
  content: "Select all"; 
}

input[type="checkbox"]:checked + span:after{
  content: "All selected"; 
}



.branded{
  margin: 4px;
  background-color: #3E8BB5;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.branded label {
  float: left; line-height: 4.0em;
  width: 16.0em; height: 4.0em;
}

.branded label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.branded label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

/* selects all of the text within the input element and changes the color of the text */
.branded label input + span{color: #fff;
    font-size: 16px;
    font-weight: 500;
    font-family: default;
}


/* This will declare how a selected input will look giving generic properties */
.branded input:checked + span {
    color: #ffffff;
    text-shadow: 0 0  0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.branded input:checked + span{background-color: #78E821;}

.branded input[type="checkbox"] + span:after{
  content: "SELECT"; 
}

.branded input[type="checkbox"]:checked + span:after{
  content: "SELECTED"; 
}


.lifepoints{
  margin: 4px;
  background-color: #3E8BB5;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.lifepoints label {
  float: left; line-height: 4.0em;
  width: 16.0em; height: 4.0em;
}

.lifepoints label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.lifepoints label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

/* selects all of the text within the input element and changes the color of the text */
.lifepoints label input + span{color: #fff;
    font-size: 16px;
    font-weight: 500;
    font-family: default;
}


/* This will declare how a selected input will look giving generic properties */
.lifepoints input:checked + span {
    color: #ffffff;
    text-shadow: 0 0  0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.lifepoints input:checked + span{background-color: #78E821;}

.lifepoints input[type="checkbox"] + span:after{
  content: "SELECT"; 
}

.lifepoints input[type="checkbox"]:checked + span:after{
  content: "SELECTED"; 
}


.mypoints{
  margin: 4px;
  background-color: #3E8BB5;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.mypoints label {
  float: left; line-height: 4.0em;
  width: 16.0em; height: 4.0em;
}

.mypoints label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.mypoints label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

/* selects all of the text within the input element and changes the color of the text */
.mypoints label input + span{color: #fff;
    font-size: 16px;
    font-weight: 500;
    font-family: default;
}


/* This will declare how a selected input will look giving generic properties */
.mypoints input:checked + span {
    color: #ffffff;
    text-shadow: 0 0  0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.mypoints input:checked + span{background-color: #78E821;}

.mypoints input[type="checkbox"] + span:after{
  content: "SELECT"; 
}

.mypoints input[type="checkbox"]:checked + span:after{
  content: "SELECTED"; 
}

<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://kit.fontawesome.com/6e6e078929.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>

 <div class="select action">
   <label>
      <input type="checkbox" value="1" id="checkbox"><span><i class="fa-solid fa-circle" id="icon"></i> &nbsp;</span>
   </label>
</div>
  
</body>
</html>



<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://kit.fontawesome.com/6e6e078929.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>

 <div class="branded surveys">
   <label>
      <input type="checkbox" value="1" id="checkbox"><span><i class="fa-solid fa-circle" id="icon"></i> &nbsp;</span>
   </label>
</div>

</body>
</html>


<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://kit.fontawesome.com/6e6e078929.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>

 <div class="lifepoints">
   <label>
      <input type="checkbox" value="1" id="checkbox"><span><i class="fa-solid fa-circle" id="icon"></i> &nbsp;</span>
   </label>
</div>

</body>
</html>


<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://kit.fontawesome.com/6e6e078929.js" crossorigin="anonymous"></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>

 <div class="mypoints">
   <label>
      <input type="checkbox" value="1" id="checkbox"><span><i class="fa-solid fa-circle" id="icon"></i> &nbsp;</span>
   </label>
</div>
  
<script>
  document.getElementById ('checkbox').addEventListener ('click', function (ev) {
    document.getElementById('icon').classList[ ev.target.checked ? 'add' : 'remove'] ('fa-circle-check');
  }, false);
</script>

</body>
</html>

如果您想要一个更有条理的视图并查看代码是如何交互的，请在此处查看： https://codepen.io/edengandhi/pen/BaJoJYY

Answer 1

您不能重复使用 ID。 ID 必须是唯一的。使用 class 和委托

并且您只能拥有一组 html、head 和 body 标签

使用 class 并从容器中委托

我也从最近的（“div”）导航到 i，但本可以改用 nextElementSibling

最后我添加了 selectAll 功能，这不是微不足道的——跨度很烦人如果你从 i 中删除跨度，那么所有 .closest('div').querySelector('i') 可以改为 .nextElementSibling

请注意，我正在发布完整的 HTML 文档以向您展示结构样式表和脚本应该是外部的

.select {
  margin: 4px;
  background-color: #06213B;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.select label {
  float: left;
  line-height: 4.0em;
  width: 26.0em;
  height: 4.0em;
}

.select label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.select label input {
  position: absolute;
  display: none;
  color: #fff !important;
}


/* selects all of the text within the input element and changes the color of the text */

.select label input+span {
  color: #fff;
  font-size: 19px;
  font-weight: 500;
  font-family: default;
}


/* This will declare how a selected input will look giving generic properties */

.select input:checked+span {
  color: #ffffff;
  text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.select input:checked+span {
  background-color: #78E821;
}

input[type="checkbox"]+span:after {
  content: "Select all";
}

input[type="checkbox"]:checked+span:after {
  content: "All selected";
}

.branded {
  margin: 4px;
  background-color: #3E8BB5;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.branded label {
  float: left;
  line-height: 4.0em;
  width: 16.0em;
  height: 4.0em;
}

.branded label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.branded label input {
  position: absolute;
  display: none;
  color: #fff !important;
}


/* selects all of the text within the input element and changes the color of the text */

.branded label input+span {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  font-family: default;
}


/* This will declare how a selected input will look giving generic properties */

.branded input:checked+span {
  color: #ffffff;
  text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.branded input:checked+span {
  background-color: #78E821;
}

.branded input[type="checkbox"]+span:after {
  content: "SELECT";
}

.branded input[type="checkbox"]:checked+span:after {
  content: "SELECTED";
}

.lifepoints {
  margin: 4px;
  background-color: #3E8BB5;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.lifepoints label {
  float: left;
  line-height: 4.0em;
  width: 16.0em;
  height: 4.0em;
}

.lifepoints label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.lifepoints label input {
  position: absolute;
  display: none;
  color: #fff !important;
}


/* selects all of the text within the input element and changes the color of the text */

.lifepoints label input+span {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  font-family: default;
}


/* This will declare how a selected input will look giving generic properties */

.lifepoints input:checked+span {
  color: #ffffff;
  text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.lifepoints input:checked+span {
  background-color: #78E821;
}

.lifepoints input[type="checkbox"]+span:after {
  content: "SELECT";
}

.lifepoints input[type="checkbox"]:checked+span:after {
  content: "SELECTED";
}

.mypoints {
  margin: 4px;
  background-color: #3E8BB5;
  border-radius: 4px;
  border: 0px solid #fff;
  overflow: hidden;
  float: left;
}

.mypoints label {
  float: left;
  line-height: 4.0em;
  width: 16.0em;
  height: 4.0em;
}

.mypoints label span {
  text-align: center;
  padding: 0px 0;
  display: block;
}

.mypoints label input {
  position: absolute;
  display: none;
  color: #fff !important;
}


/* selects all of the text within the input element and changes the color of the text */

.mypoints label input+span {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  font-family: default;
}


/* This will declare how a selected input will look giving generic properties */

.mypoints input:checked+span {
  color: #ffffff;
  text-shadow: 0 0 0px rgba(0, 0, 0, 0.8);
}


/*
This following statements selects each category individually that contains an input element that is a checkbox and is checked (or selected) and chabges the background color of the span element.
*/

.mypoints input:checked+span {
  background-color: #78E821;
}

.mypoints input[type="checkbox"]+span:after {
  content: "SELECT";
}

.mypoints input[type="checkbox"]:checked+span:after {
  content: "SELECTED";
}

<!doctype html>
<html>

<head>
  <title>Test</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" />
  <script>
    window.addEventListener('DOMContentLoaded', function() {
      const checks = document.querySelectorAll('.chk');
      const checkAll = document.getElementById('selectAll')
      document.addEventListener('click', function(e) {
        const tgt = e.target;
        if (tgt.matches('.chk')) {
          if (tgt.id === "selectAll") {
            tgt.closest('div').querySelector('i').classList[tgt.checked ? 'add' : 'remove']('fa-circle-check');
            checks.forEach(chk => {
              chk.checked = tgt.checked
              chk.closest('div').querySelector('i').classList[chk.checked ? 'add' : 'remove']('fa-circle-check');
            })
          } else {
            tgt.closest('div').querySelector('i').classList[tgt.checked ? 'add' : 'remove']('fa-circle-check');
            checkAll.checked = [...checks].slice(1).every(chk => chk.checked); // check all sub checkboxes are checked
            checkAll.closest('div').querySelector('i').classList[checkAll.checked ? 'add' : 'remove']('fa-circle-check');
          }
        }
      });
    });
  </script>
</head>

<body>
  <div class="select action">
    <label>
      <input type="checkbox" class="chk" id="selectAll" value="1"><span><i class="fa-solid fa-circle"></i> &nbsp;</span>
   </label>
  </div>
  <div class="branded surveys">
    <label>
      <input type="checkbox" class="chk" value="1"><span><i class="fa-solid fa-circle"></i> &nbsp;</span>
   </label>
  </div><br clear="all" />
  <h2>Some other place</h2><br clear="all" />
  <div class="lifepoints">
    <label>
      <input type="checkbox" class="chk" value="1"><span><i class="fa-solid fa-circle"></i> &nbsp;</span>
   </label>
  </div><br clear="all" />
  <h2>Some other place</h2>
  <br clear="all" />
  <div class="mypoints">
    <label>
      <input type="checkbox" class="chk" value="1"><span><i class="fa-solid fa-circle"></i> &nbsp;</span>
   </label>
  </div>
</body>

javascript 仅适用于一个元素，仅适用于第一个

javascript only working for one element, only the first one

html

javascript

css

checkbox

jquery