14

親divをクリックするたびにラジオボタンをオン/オフにしたいと思います。ラジオボタンはもともと非表示になっています。

<label>divをラップすることでそれを達成しようとしていました。動作しますが、動作をjQ.toggleClass停止します。

HTML

<div class="big">
This is a div 1
<input id="chb" type="radio" />
</div>

<br/>

<div class="big">
This is a div 2
<input id="chb" type="radio" />
</div>

CSS

.big {

    width:100px;
    height:100px;
    background-color:red;
    cursor:pointer;

}

.hli {

    border:2px solid blue;

}

/*.chb{display:none;}*/

JQ

$('.big').click(function() {
$('.hli').toggleClass('hli');   
$(this).toggleClass('hli');
});

JSFIDDLE: http://jsfiddle.net/QqVCu/2/

4

7 に答える 7

28

それはどうですか: http://jsfiddle.net/sgospodarets/QqVCu/5/ ? 必要なのは、入力をラベルにラップすることだけです。次に、JavaScipt は必要ありません。

于 2012-07-21T12:05:18.260 に答える
10

純粋なHTML/CSSソリューションの使用：

.isHidden {
  display: none; /* hide radio buttons */
}

.label {
  display: inline-block;
  background-color: red;
  width: 120px;
  height: 120px;
  padding: 5px 10px;
}

.radio:checked + .label {   /* target next sibling (+) label */
  background-color: blue;
}
<input id="radio_1" class="radio isHidden" name="radio_a" type="radio">
<label for="radio_1" class="label">1</label>

<input id="radio_2" class="radio isHidden" name="radio_a" type="radio">
<label for="radio_2" class="label">2</label>

于 2012-07-21T11:57:16.357 に答える
3

メソッドを使用できますprop()。次のことを試してください。

$('.big').click(function() {
  $('.hli').removeClass('hli');
  $(this).addClass('hli').find('input').prop('checked', true)    
});

デモ

IDは一意である必要があり、正しく機能するためには、ラジオボタンに名前のプロパティが必要であることに注意してください。

<input id="chb1" type="radio" name="radioGroup"/>
<input id="chb2" type="radio" name="radioGroup"/>
于 2012-07-21T11:55:30.497 に答える
3

これが必要な場合は教えてください：http://jsfiddle.net/QqVCu/6/

jQuery (更新)

$('.big').click(function() {
    if($(this).find('input[type="radio"]').is(':checked')){
       $(this).find('input[type="radio"]').prop('checked', false);
    }
    else{
       $(this).find('input[type="radio"]').prop('checked', true);
    }
    $('.hli').toggleClass('hli');    
    $(this).toggleClass('hli');
});
于 2012-07-21T11:49:19.417 に答える
2

これを試してください：http：//jsfiddle.net/ZuXvM/

単一のラジオボタンをオンにするには、それらを名前でグループ化する必要があります（グループの一部であるすべてのボタンに同じ名前を付けます）

于 2012-07-21T11:53:23.320 に答える
0

これを試して：

http://jsfiddle.net/QqVCu/50/

jQuery イベントのバブリングをバイパスするために、通常の JS を使用して click() をトリガーしました。

$('.big').click(function () {
    $('.hli').toggleClass('hli');
    $(this).toggleClass('hli');
    var Id = $(this).find('input[type=radio]').attr('id');
    document.getElementById(Id).click();
});
于 2013-04-05T22:22:46.570 に答える