在单选按钮 select 上 Jquery 中的 addClass 和 removeClass

Question

我有两套不同的单选按钮。但是单选按钮显示为图像。我的问题是关于图片的select（单选按钮），我希望其他图片隐藏起来。所以我的想法是将 class 添加到选中状态，而不是添加另一个 class 到未选中状态。基于未选中的 class，我可以隐藏它们。

我的问题是因为我有 2 组单选按钮，一组用于尺寸，一组用于原因，我希望它们在我 select 尺寸时区分 them.So，我不想要所有原因单选按钮变为隐藏。

所以我可以分别区分它们并针对它们。

如果我添加这行代码：

$('label:has(input:radio:checked)').addClass('activeReason');

它适用于我不想要的所有单选按钮。

这是我的单选按钮：大小

    <form id="sign-condition">

          <label>
            <input type="radio" name="sign-condition"  class="sign-condition" value="new_sign" />
            <img src="../../css/icons/new-signs.png">
          </label>

          <label>
            <input type="radio" name="sign-condition" class="sign-condition"  value="old_sign"/>
            <img src="../../css/icons/old-signs.png">
          </label>
    </form>

这是我的单选按钮：原因

    <div class="col-md-6">

                <form id="sign-reason">

                  <label>
                    <input type="radio" name="sign-reason" value="damaged" />
                    <img src="../../css/buttons/damaged.png">
                  </label>

                  <label>
                    <input type="radio" name="sign-reason" value="odd-size"/>
                    <img src="../../css/buttons/odd-size.png">
                  </label>

                  <label>
                    <input type="radio" name="sign-reason" value="not-correct-standard"/>
                    <img src="../../css/buttons/not-correct-standard.png">
                  </label>
     </form

这里是 JQuery，我试图以不同的方式针对每个集合。

  <script>
        $(document).ready(function(){ 

        $('input:radio').click(function() {
            $('label>.sign-condition:has(input:radio:checked)').addClass('activeCondition');
            $('label>.sign-condition:has(input:radio:checked)').removeClass('disable');
            $('label>.sign-condition:has(input:radio:not(:checked))').removeClass('activeCondition');
            $('label>.sign-condition:has(input:radio:not(:checked))').addClass('disable');

        });



        });
        </script>

如何以不同方式定位每组单选按钮。谢谢

Answer 1

获取当前点击的单选按钮的名称和值，然后通过名称获取单选按钮（原生javascript或jQuery），它将是一个数组，遍历该数组使用您知道的最佳方法，并隐藏值不等于当前单击的单选按钮的单选按钮。

希望对您有所帮助。

Answer 2

试试下面的 JS 代码。将其临时替换为您的代码。

<script>
    $(document).ready(function(){
        $(#sign-condition input:radio).click(function() {
            $('label>.sign-condition:has(input:radio:not(:checked))').removeClass('activeCondition').addClass('disable');
            $(this).removeClass('disable').addClass('activeCondition');
        });
    });
</script>

Answer 3

getElementsByName 应该 return 数组按照您为单选按钮设置的名称。然后根据该结果，使用您的逻辑在选中的按钮上添加类。

Answer 4

我不确定这是否是您需要的：

$(document).ready(function(){ 
    $('input:checkbox').change(function() {
       /*get the parent node of the radio and then hide only its siblings*/
       $(this).parent('label').siblings().toggle();
    });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="sign-condition">

          <label>
            <input type="checkbox" name="sign-condition"  class="sign-condition" value="new_sign" />
            <img src="../../css/icons/new-signs.png">
          </label>

          <label>
            <input type="checkbox" name="sign-condition" class="sign-condition"  value="old_sign"/>
            <img src="../../css/icons/old-signs.png">
          </label>
    </form>
    
       <form id="sign-reason">

                  <label>
                    <input type="checkbox" name="sign-reason" value="damaged" />
                    <img src="../../css/buttons/damaged.png">
                  </label>

                  <label>
                    <input type="checkbox" name="sign-reason" value="odd-size"/>
                    <img src="../../css/buttons/odd-size.png">
                  </label>

                  <label>
                    <input type="checkbox" name="sign-reason" value="not-correct-standard"/>
                    <img src="../../css/buttons/not-correct-standard.png">
                  </label>
     </form>

在单选按钮 select 上 Jquery 中的 addClass 和 removeClass

addClass and removeClass in Jquery on radio button select

javascript

jquery

html

radio-button

checked