单击不触发单选按钮移动到标签外部

Question

我在 里面有一个选项，所以一旦用户点击它就会发布一个请求。因此，我想在标签周围添加边框，但是当我将单选按钮移动到标签外部时，单击不起作用。radiolabel

$(document).on('click', '[name^=\'option\']', function() {

    console.log("clicked");

});

单击功能适用于以下 HTML

<label class="radio">

    <input type="radio" class="radio" style="display:none;" name="option[333223]" value="2485">

    <img class="less-border" src="a3-100x100.png" alt="A4 21 x 29,7 cm">           

</label>

这不起作用

<input type="radio" class="radio" style="display:none;" name="option[333223]" value="2485">

<label class="radio">

    <img class="less-border" src="a3-100x100.png">

</label>

我想确保边框已添加到标签（如果选中）

input[type="radio"]:checked + label {

    border: red 1px solid;

}

有人可以告诉我可能导致此问题的原因吗？

Answer 1

在单选按钮中缺少 id，在标签中缺少属性，两者在正常工作时是相同的&nbsp;<input type="radio" class="radio" style="display:none;" id="test" name="option[333223]" value="2485">&nbsp;<label class="radio" for="test">&nbsp; &nbsp;<img class="less-border" src="a3-100x100.png">&nbsp;</label>