javascript单选按钮在<span>元素- UX

Question

我有多个radio按钮，每个按钮都在一个带有边距的<span>中，因此它们看起来就像一个带有无线电元素的按钮。单击radio按钮的<span>父元素中的任何位置时，如何检查radio按钮

面向UX

<span class="radio-box" id="white-box">
  <input type="radio" id="white" name="colour"> White
</span>

<span class="radio-box" id="red-box">
  <input type="radio" id="red" name="colour"> Red
</span>

<span class="radio-box"  id="blue-box">
  <input type="radio" id="blue" name="colour"> Blue
</span>

抱歉，在Javascript

谢谢:)

Answer 1

这就是，， elements是干什么用的。使用这些元素，而不是使用span元素：

<label class="radio-box" id="white-box">
  <input type="radio" id="white" name="colour"> White
</label>

<label class="radio-box" id="red-box">
  <input type="radio" id="red" name="colour"> Red
</label>

<label class="radio-box"  id="blue-box">
  <input type="radio" id="blue" name="colour"> Blue
</label>

当标签像这样包装input时，它就与那个input相关联。(如果不能使用包装，可以使用for属性来告诉标签它的关联input的id是什么。)

你可以让它和斯潘一起工作。只针对这些范围：

$("span > input[type=radio][name=colour]").parent().on("click", function() {
    $(this).find("input[type=radio][name=colour]").prop("checked", true);
});

或者瞄准span.radio-box中的任何一个span.radio-box

$("span.radio-box > input[type=radio]").parent().on("click", function() {
    $(this).find("input[type=radio]").prop("checked", true);
});

但同样，这正是label的目的，所以最好使用它。

Answer 2

如果您不想使用<label>标记、没有jquery和普通的JavaScript，那么这里有一个解决方案。

var radioBoxes = document.querySelectorAll("span.radio-box");
radioBoxes.forEach(function (box) {
    var radioButton = box.querySelector("input[type='radio']");
    box.addEventListener("click", function () {
        radioButton.click();
    });
});