如何在输入(type=";Radio "and checked ="checked &qu

How to add active class on the span next of the input (type=" radio "and checked ="checked ")?

本文关键字：quot checked and qu Radio 输入 type      更新时间：2023-09-26

我想添加一个活动类到span旁边的输入无线电有状态检查，我们有15相同的div在页面

给出的代码是: 

<div id="age_restric1" class="singleselect">
    <label for="age_restriction" class="required">Age Restriction <span class="required">*</span></label>
    <div class="ms-parent">
      <button class="ms-choice" type="button" style="width: 58px;"><span class=""> 18+</span>
      <div class=""></div>
      </button>
      <div class="ms-drop top" style="width: 58px; display: none;">
         <ul style="max-height: 250px;">
            <li>
               <label>
                  <input type="radio" value="" name="selectItem">
                  <span>None</span></label>
            </li>
            <li>
               <label>
                  <input type="radio" checked="checked" value="18+" name="selectItem">
                  <span>18+</span></label>
            </li>
            <li>
               <label>
                  <input type="radio" value="19+" name="selectItem">
                  <span>19+</span></label>
            </li>
         </ul>
      </div>
    </div>
    </div>
    <div class="singleselect">
    <label class="required" for="appropriate_atti">Appropriate Attire <span class="required">*</span></label>
    <div class="ms-parent">
      <button class="ms-choice" type="button" style="width: 130px;"><span class=""> Casual</span>
      <div></div>
      </button>
      <div class="ms-drop bottom" style="width: 130px;">
         <ul style="max-height: 250px;">
            <li>
               <label>
                  <input type="radio" value="" name="selectItem">
                  <span>--Select Attire--</span></label>
            </li>
            <li>
               <label>
                  <input type="radio" value="339" name="selectItem">
                  <span>Business Casual</span></label>
            </li>
            <li>
               <label>
                  <input type="radio" checked="checked" value="338" name="selectItem">
                  <span>Casual</span></label>
            </li>
         </ul>
      </div>
    </div>
    </div>
Javascript: 

 setTimeout(customdrop, 200);
         function customdrop(){
                    $(".singleselect :checked").each(function(){
                    $(this).next('span').addClass('active');
                    });

             }

可以使用

$('.singleselect input[type="radio"]:checked+span')

访问选中无线电旁边的<span>。

$("{

if($('input').is(':checked')) { 
    $(this).closest('li').find('span').addClass('active');
}

});

try this

 jQuery("input[name=selectItem]").each(function(){
            if(jQuery(this).is(':checked')){
            jQuery(this).next('span').addClass('active');
            }
        })

$(";{

if($('input[type=radio]').is(':checked')) { 
    $(this).closest('li').find('span').addClass('active');
}

});

使用属性选择器 jquery 

$(".singleselect [type=radio]:checked").each(function () {
     $(this).next('span').addClass('active');
 });
 function customdrop() {
     $(".active").removeClass('active');
     $(this).next('span').addClass('active');
 }
 $(".singleselect [type=radio]").on("change", customdrop);
<<h2>更新演示/h2>
相关文章：