0

1 つのラベルで異なる名前の複数のラジオ ボタンを選択する方法は?

ここに私が達成しようとしていることの簡単な例があります...

<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）を選択して選択したいのですが、何かアイデアはありますか？

4

4 に答える 4

1

ラベルが常に適切にネストされていると仮定すると、clickイベントは自然に伝播します。次に、checked プロパティを手動で設定します。

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

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

于 2013-03-12T05:14:13.997 に答える
1 
<div id="divId">1A / 2B / 3A</div>

$('#divId').click(function () {
    $('#1A').attr('checked', checked);
    $('#2B').attr('checked', checked);
    $('#3A').attr('checked', checked);
});
于 2013-03-12T05:19:10.823 に答える
0

label 要素のデフォルトの動作をオーバーライドして、クリック イベントを親要素に伝播できます。

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

テストしてください: http://jsfiddle.net/phxjL/

キー ポイントはreturn true;関数 bubbleLabelClick にあります。

于 2013-03-12T05:17:03.813 に答える
0

あなたのdivにID（一意）を与えます

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

クリック関数を呼び出す

 $('#divID').click(function(){
      $('#1A').prop('checked',true);
      $('#2B').prop('checked',true);
      $('#3A').prop('checked',true);
 });
于 2013-03-12T05:05:16.893 に答える