时间戳

首页 > 解决方案 > 切换单选按钮的父类（添加/删除）

javascript - 切换单选按钮的父类（添加/删除）

问题描述

我有这样的复选框：

    window.onload=function() {
      document.querySelectorAll('input[type="checkbox"]').forEach(function(el) {
      el.addEventListener('change', function() {
        if (this.checked) {
          this.parentNode.classList.add('border-blue');
        } else {
          this.parentNode.classList.remove('border-blue');
        }
      })
    })
   }

但是，当我更改 时type="radio"，class不会删除。如何使用单选按钮执行此操作？

这是HTML：

<div class="dfield">
  <div class="one_column">
    <label for="fieldname77_1_rb0" class="border-blue">
      <input name="fieldname77_1" id="fieldname77_1_rb0" class="field  group  required valid" value="0.8" vt="0.8" type="radio" aria-invalid="false"> <span>Small Car</span>
    </label>
  </div>
  <div class="one_column">
    <label for="fieldname77_1_rb1" class="border-blue">
      <input name="fieldname77_1" id="fieldname77_1_rb1" class="field  group  required valid" value="1" vt="1" type="radio" aria-invalid="false"> <span>Medium Car</span>
    </label>
  </div>
</div>


window.onload = function() {
  document.querySelectorAll('input[type="checkbox"]').forEach(function(el) {
    el.addEventListener('change', function() {
      if (this.checked) {
        this.parentNode.classList.add('border-blue');
      } else {
        this.parentNode.classList.remove('border-blue');
      }
    })
  })
}
<div class="dfield">
  <div class="one_column">
    <label for="fieldname77_1_rb0" class="border-blue">
          <input name="fieldname77_1" id="fieldname77_1_rb0" class="field  group  required valid" value="0.8" vt="0.8" type="radio" aria-invalid="false"> <span>Small Car</span>
        </label>
  </div>
  <div class="one_column">
    <label for="fieldname77_1_rb1" class="border-blue">
          <input name="fieldname77_1" id="fieldname77_1_rb1" class="field  group  required valid" value="1" vt="1" type="radio" aria-invalid="false"> <span>Medium Car</span>
        </label>
  </div>
</div>

标签： javascript

解决方案

您正在检查复选框，但使用单选按钮。

您可能还需要在兄弟姐妹中将它们关闭。

注意：您有一个起点，所有这些起点都是蓝色边框，因此在更改一个之前它不会这样做（您有一个更改事件）。您可以删除原始标记中的类或在其中一个页面加载期间触发更改事件（不更改值）

我没有对您的使用或需求做出任何假设，只是简单地说明了问题和一种可能的解决方案。

window.onload = function() {
  document.querySelectorAll('input[type="radio"]')
    .forEach(function(el) {
      el.addEventListener('change', function() {
        // this is a high handed approach, you may need to walk the parent node siblings children instead.
        // turn off what is on
        var bb = document.getElementsByClassName("border-blue");
        var i;
        for (i = 0; i < bb.length; i++) {
          bb[i].classList.remove('border-blue');
        }

        if (this.checked) {
          this.parentNode.classList.add('border-blue');
        } else {
          this.parentNode.classList.remove('border-blue');
        }
      })
    })
}
.label-wrapper {
  border: solid lime 3px;
}

.border-blue {
  border: solid blue 3px;
}
<div class="dfield">
  <div class="one_column">
    <label for="fieldname77_1_rb0" class="label-wrapper border-blue">
          <input name="fieldname77_1" id="fieldname77_1_rb0" class="field  group  required valid" value="0.8" vt="0.8" type="radio" aria-invalid="false"> <span>Small Car</span>
        </label>
  </div>
  <div class="one_column">
    <label for="fieldname77_1_rb1" class="label-wrapper border-blue">
          <input name="fieldname77_1" id="fieldname77_1_rb1" class="field  group  required valid" value="1" vt="1" type="radio" aria-invalid="false"> <span>Medium Car</span>
        </label>
  </div>
</div>

推荐阅读