Question

我使用这样的复选框进行操作：

    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>

Answer 1

嗨，请尝试我的代码：

var radioBtn = document.querySelectorAll('input[type="radio"]');

window.onload = function() {
  radioBtn.forEach(function(currentNode) {
    currentNode.addEventListener('change', function() {
      // removing class to all nodes
      radioBtn.forEach(function(node) {
        node.parentElement.classList.remove('border-blue');
      });
      // then add the class on the specified node
      currentNode.parentElement.classList.add('border-blue');
    });
  });
};

我的建议是删除所有相关元素的类，然后最后将该类再次添加到指定的元素。

希望这将有助于或提供一个新的更好的主意。

Answer 2

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

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

注意：您有一个起点，所有起点均为蓝边，因此只有更改一个起点（您有一个change事件）后，它才会这样做。您可以删除原始标记中的类，也可以在其中一个页面加载期间触发更改事件（不更改值）

我没有对您的用法或需求做任何假设，仅说明问题和一种可能的解决方案。

interface FooBar {
   name: string
}

interface Other extends FooBar {
   a: number;
   b: number;
}

function convert(d: Other) {
   const {a, b, ...c} = d;
   c.name;
   // ^^^ -- WebStorm will now match "name" as a property of FooBar.
}

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

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

2 个答案: