javascript - 如何用一个标签选择多个名称不同的单选按钮？

Question

如何用一个标签选择多个名称不同的单选按钮？

这是我要实现的目标的简单示例...

<input id="1A" type="radio" name="first" value="A">firstA<br>
<input id="1B" type="radio" name="first" value="B">firstB<br>
<input id="2A" type="radio" name="second">secondA<br>
<input id="2B" type="radio" name="second">secondB<br>
<input id="3A" type="radio" name="third">thirdA<br>
<input id="3B" type="radio" name="third">thirdB<br>
<label for="1A">
    <label for="2B">
        <label for="3A">
            <div>1A / 2B / 3A</div>
        </label>
    </label>
</label>

所以当我单击“1A / 2B / 3A”时，我希望它选择选择 3 个单选按钮（firstA、secondB、thirdA），有什么想法吗？

Answer 1

假设标签总是正确嵌套，click事件会自然传播。您可以手动设置选中的属性，然后：

$("label").on('click', function () {
    $("#" + $(this).attr('for')).prop('checked', true);
});

http://jsfiddle.net/ExplosionPIlls/rT8x5/2/

Answer 2

<div id="divId">1A / 2B / 3A</div>

$('#divId').click(function () {
    $('#1A').attr('checked', checked);
    $('#2B').attr('checked', checked);
    $('#3A').attr('checked', checked);
});

Answer 3

给你的 div 一个 id（唯一）

 <div id="divID">1A / 2B / 3A</div>

调用点击函数

 $('#divID').click(function(){
      $('#1A').prop('checked',true);
      $('#2B').prop('checked',true);
      $('#3A').prop('checked',true);
 });

Answer 4

您可以覆盖标签元素的默认行为以将点击事件传播到父元素。

function bubbleLabelClick(e){
    $("#" + $(this).attr('for')).prop('checked', true);
    return true;
}
$('label').click( bubbleLabelClick);

测试它：http: //jsfiddle.net/phxjL/

关键点return true;在函数bubbleLabelClick 中。