переключатель проверки 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

Если вы хотите сделать это без тега <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();
    });
});

Answer 2

Это точно для чего label элементов .Используйте их, а не 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, чтобы сообщить метке, что такое id связанного с ним input.)

Вы могли бы сделатьэто работает с пролетами.Таргетинг просто на эти промежутки:

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

или нацеливание на input[type=radio] внутри span.radio-box:

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

Но, опять же, это именно то, что label для, так что лучше использовать это.