Question

我有两组不同的单选按钮。但单选按钮显示为图像。我的问题是选择图片（单选按钮），我希望其他图片隐藏起来。所以我想的方法是添加要检查的类，然后添加另一个未检查的类。基于未检查的类，我可以隐藏那些。

我的问题是因为我有两组单选按钮，一个用于大小，一个用于理由，我希望它们区分它们。所以当我选择尺寸时，我不希望所有原因单选按钮被隐藏。

所以我可以单独区分它们并定位它们。

如果我添加这行代码：

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

尝试下面的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 2

getElementsByName应该按照单选按钮的名称返回数组。然后在该结果上，使用您的逻辑在选中按钮上添加类。

Answer 3

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

＆＃13;

$(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();
    });
 });

＆＃13;

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

＆＃13;

Answer 4

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

希望它有所帮助。

单选按钮选择Jquery中的addClass和removeClass

4 个答案: