0

私はこのhtmlを持っています -

<ol class="subproduct">
<li>
    <input type="checkbox" name="extra2" value="Multidispositivo" />
    <p class="checkbox"></p>
    <h3>test<span class="price"><span>+2</span>€&lt;/span></h3>
    <p>test words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="Multidispositivo" />
    <p class="checkbox"></p>
    <h3>test</h3>
    <p>test words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="15 min extra" />
    <p class="checkbox"></p>
    <h3>test/h3>
    <p>test words</p>
</li>
<li>
    <input type="checkbox" name="extra2" value="Multidispositivo" />
    <p class="checkbox"></p>
    <h3>test</h3>
    <p>test words</p>
</li>
</ol>

チェックボックスを「チェック」するときにliにクラスを追加する必要があります。現在、私はこれを使用しています

$(document).ready(function() {
  $('.subproduct input:checkbox').change(function(){
     if($(this).is(":checked")) {
         $(this).parent().toggleClass("checked");
     }
  });
});

しかし、ユーザーがチェックボックスを1つだけチェックするようにする必要があるため、別のボックスをチェックすると、他のクラスが削除されます

  • これはどのように可能ですか？

    • 4

    5 に答える 5

    2

    これを参照してください:サンプル

    $(document).ready(function() {
 $('.subproduct input:checkbox').change(function(){
   $('.subproduct input:checkbox').not(this).attr("checked",false);
   $(".subproduct li").removeClass("checked");
   if($(this).is(":checked")) {
       $(this).parent().toggleClass("checked");
   }
 });
});
    于 2013-03-12T10:48:42.337 に答える
    1

    <li>変更イベントのすべてのクラスを削除します...使用してremoveClass();...そしてそれをチェックtoggleClass()した場合<li>

    これを試して

    $(document).ready(function() {
  $('.subproduct input:checkbox').change(function(){
   $(".subproduct li").removeClass("checked"); //<---here
    if($(this).is(":checked")) {
     $(this).parent().toggleClass("checked"); // and using addClass("checked") here is better .. 
    }
  });
 });
    于 2013-03-12T10:49:24.207 に答える
    1

    これを試してください http://jsfiddle.net/QHuV9/4/

     $(document).ready(function() {
  $('.subproduct input:checkbox').change(function(){
     if($(this).is(":checked")) {
         $(this).parent("li").addClass("checked");
     }

      else {
      $(this).parent("li").removeClass("checked");
      }
  });
});

    私はあなたの質問の儀式を取っているといいのですが

    于 2013-03-12T10:49:51.913 に答える
    1

    このデモを試す

    $(document).ready(function() {
  $('.subproduct input:checkbox').change(function(){
    if($(this).is(":checked")) {
       $(':checkbox').prop('checked',false);
       $('ol li').removeClass('checked');
       $(this).prop('checked',true);
       $(this).parent().addClass('checked');
    } else {
       $(this).parent().removeClass('checked');
    }
  });
});
    于 2013-03-12T10:48:50.883 に答える
    1

    最も簡単な解決策は次のようなものです。

    $(document).ready(function() {
  $('.subproduct input:checkbox').change(function(){
     if($(this).is(":checked")) {
         $(this).parent().siblings().removeClass('checked');
         $(this).parent().addClass("checked");
     }
  });
});

    <input type="radio">そして、ユーザーが動作を理解できるように使用することをお勧めします。

    于 2013-03-12T10:52:25.283 に答える