1

私は3つのラジオボタンを持っています。私がする必要があるのは、1つのラジオボタンが選択されたときに、次のようにテキストにcssクラス名「line」を適用する必要があることです。

  <span> <input type="radio" name="group1" value="Milk">  Milk </span>

私は自分のクラスをMilkに適用する必要があり、ユーザーが他のラジオボタンを選択すると、同じクラスが他のラジオボタンのテキストに適用されますが、前のクラスからクラスが削除されます。これが私が試したものです。

<style type="text/css">
    .line{
        text-decoration: line-through;
         }
</style>

<script type="text/javascript">
$(document).ready(function(){
   $("input[type='radio']").change(function(){
      if($(this).is(':checked'))
          //i wana do this
           $(this).addClass('line');
         //if another is selected so do this
           $(this).removeClass('line');
      });
   });


 <div>
  <span> <input type="radio" name="group1" value="Milk">  Milk </span> </br>
  <span> <input type="radio" name="group1" value="Butter"> Butter </span> </br>
  <span> <input type="radio" name="group1" value="Cheese"> Cheese </span> </br>
  <hr>
</div>
4

2 に答える 2

4

クラスをに追加する必要があるため、ラジオボタンからにアクセスするためにspan使用できます。他の要素からクラスを削除するには、選択したクラスにクラスを追加する前に、問題のクラスを持つすべての要素からクラスを削除します。parentspanspanspan

$("input[type='radio']").change(function() {
   if(this.checked) {
      $('span.line').removeClass('line');
      $(this).parent().addClass('line');
   }
});

これが実際の例です。

this.checked使用していたjQueryバージョンの代わりにを使用していることに注意してください。可能な場合は、ネイティブDOMプロパティを使用する方がはるかに高速です。

于 2012-06-14T08:36:53.660 に答える
3 
$("input[type='radio']").change(function() {
    console.log(this.checked)
    if (this.checked) {
        // remove previously added line class
        $('span.line').removeClass('line');
        // you should add class to span, because text is
        // within span tag, not in input
        $(this).parent().addClass('line');
    }
});

作業サンプル

于 2012-06-14T08:35:22.213 に答える