0

私はこれを持っています: http://jsfiddle.net/ptWn/

<pre>
/*HTML*/
`<label class="for_radio"><input type="radio"><span>radio-button-1</span></label>`
`<label class="for_radio"><input type="radio"><span>radio-button-2</span></label>`

/*jQuery*/
$(document).ready(function(){
$('input[type="radio"]').click(function() {
if($('input[type="radio"]').is(':checked')) { 
$(this).closest('label').addClass('active');}
else {
$(this).closest('label').removeClass('active');
}

});
      });

/*CSS*/
.active {
    background: #ffc;
}
</pre>

...ラジオボタンが選択されたときにラベルの背景色が変わるという意味で機能しますが、ラジオボタンの1つがチェックされていないときに背景色を変更する.activeクラスを削除する方法がわかりません。また、jsfiddle では、何らかの理由で、別のラジオ ボタンをクリックしても、別のラジオ ボタンが選択解除されません。

理由を理解するのに苦労している 2 番目のことは、if ステートメントの前に .click(function() が必要なように思われる理由です。

if($('input[type="radio"]').is(':checked')) { 
$(this).closest('label').addClass('active');}

... JS スニペットとして単独では機能しません。なんで？

洞察をいただければ幸いです。ありがとう。

4

4 に答える 4

2

まず、pre タグを script タグに変更します。

if ステートメントを使用してクラスを追加および削除する代わりに、単に使用してみませんtoggleClass()か?

$('input[type="radio"]').click(function() {
   if($('input[type="radio"]').is(':checked')) { 
      $(this).closest('label').toggleClass('active');
   }
});
于 2013-03-06T22:43:27.863 に答える
1

if ステートメントは必要ありません。これを試してください。

$(document).ready(function(){
   $('input[type="radio"]').click(function() {
      $('input:not(:checked)').parent().removeClass("active");
      $('input:checked').parent().addClass("active");
   });
});

また、「別のラジオ ボタンをクリックしても、別のラジオ ボタンが選択解除されない」とおっしゃいました。

入力に ​​name 属性を追加します。Name="Group1"

于 2013-03-06T22:50:51.237 に答える
1

さて、ここにいくつかのことがあります。

まず、グループ内のラジオ ボタンは同じ名前である必要があります。例えば：

<label class="for_radio"><input type="radio" name="buttons"><span>radio-button-1</span></label>
<label class="for_radio"><input type="radio" name="buttons"><span>radio-button-2</span></label>

これにより、代替ボタンの選択が解除されないという問題が解決されます。

クラスの追加と削除の問題を修正するには、jQuery toggleClass を使用します。

$('input[type="radio"]').click(function() {
    $(this).closest('label').toggleClass('active');
});

if 文は必要ありません。それが役立つことを願っています。

于 2013-03-06T22:51:27.913 に答える
0

. の代わり<pre>に<script>.

$('input[type="radio"]').on('change',function() {
    $('label.active').removeClass('active'); //removes class on old active label
    $(this).parent().addClass('active'); // adds class to new active label
}

.toggleClass() を使用する代わりにこのようにした理由は、2 つ以上のラジオ ボタンがある場合に実際に機能するためです。

于 2013-03-06T22:45:42.257 に答える