addClass和Removeclass在Radio按钮上的jQuery中选择

Question

我有2个不同的无线电按钮。但是正在以图像显示无线电按钮。我的问题是在选择图片（广播按钮）上，我希望其他图片被隐藏。因此，我认为的方式是将类添加到检查中，而不是添加其他类未检查。基于未检查的班级，我可以将其隐藏。

我的问题是因为我有2组无线电按钮一组用于大小，一个是出于原因，我希望它们区分它们。P>

因此，我可以分开区分它们并瞄准它们。

如果我添加此代码：

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

它适用于我不想要的所有无线电按钮。

这是我的收音机按钮： size

    <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

我不确定这是否需要：

$(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>

Answer 2

getElementsByname应该按照您的名称返回阵列。然后在结果上，使用您的逻辑在检查按钮上添加插序。

Answer 3

尝试以下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 4

获取当前单击的广播按钮的名称和值，然后按名称获取广播按钮（本机javascript或jQuery），它将是一个数组您知道的方法，然后隐藏值不等于当前单击的广播按钮的单元按钮。

希望它有帮助。