转换为语音并朗读全文 00:00 / 00:00
<div class="main">
<label><input type="radio" name="imradio" id="radio_1" class="bymt_radio" checked='checked'/>radio1<label>
<label><input type="radio" name="imradio" id="radio_2" class="bymt_radio" />radio2<label>
<label><input type="radio" name="imradio" id="radio_3" class="bymt_radio" />radio3<label>
<label><input type="radio" name="imradio" id="radio_4" class="bymt_radio" />radio4<label>
<div class="children radio_1">radio1 text</div>
<div class="children radio_2">radio2 text</div>
<div class="children radio_3">radio3 text</div>
<div class="children radio_4">radio4 text</div>
</div>

如上例子,有一堆radio

如果其中一个radio点击了,就获取到它的id,然后对应此id的子元素显示粗来,其他的隐藏掉(.children默认是display:none)

如上例子,我用input[name='imradio']判断这个元素,但是,不论点这货里面的哪一个radio,都返回checked

于是,点一个显示一个,就是不隐藏,我就卡在这一步了.........

我的JQ代码是这样的:

$(".main input[name='imradio']").click(function() {
thisid = $(this).attr("id");
if ($(this).is(":checked")) {
$("." + thisid).slideDown("fast");
} else {
$("." + thisid).slideUp("fast");
}
});

请问大神们,有什么办法可以更好的判断它呢,我想让点击的radio对应id的子元素显示出来,其他的隐藏掉。

parent()、siblings()、filter()、children()、find()这些遍历方法我都用过了,就是不行...估计是哪里没有写对。求大神能帮我解惑一二,感激不尽!

如果你觉得文章不错,可以给点小小奖励~

微信

微信

支付宝

支付宝

带符号 * 的表示必填项
  1. suifengtec
    suifengtec
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #fake-tips-1 .children{ display: none; } </style> </head> <body> <div class="main"> <div id="fake-form-1"> // 不用ID了 <label><input type="radio" name="imradio" id="radio_1" class="bymt_radio" value="radio_1"/>radio1<label> <label><input type="radio" name="imradio" id="radio_2" class="bymt_radio" value="radio_2"/>radio2<label> <label><input type="radio" name="imradio" id="radio_3" class="bymt_radio" value="radio_3" />radio3<label> <label><input type="radio" name="imradio" id="radio_4" class="bymt_radio" value="radio_4"/>radio4<label> </div> <div id="fake-tips-1"> <div class="children radio_1">radio1 text</div> <div class="children radio_2">radio2 text</div> <div class="children radio_3">radio3 text</div> <div class="children radio_4">radio4 text</div> </div> </div><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> jQuery(document).ready(function($) { var myRadioUtils = { init:function(radioFirst,tipFirst){ $(radioFirst+':nth-child(0)').show(); $(tipFirst+':nth-child(0)').show(); return this; }, fire:function(radioSelectors, tipContainer){ $(radioSelectors).on('click',function(e){ var that = $(this); $(tipContainer).hide(); $(tipContainer+'.'+$(this).val()).show();}); return this; } }; myRadioUtils.init('#fake-form-1 input[type=radio]','#fake-tips-1 .children').fire('#fake-form-1 input[type=radio]','#fake-tips-1 .children'); });</script> </body> </html>
    回复
  2. znboy
    znboy

    表示ie11也崩溃的

    回复
  3. 馒头饭MADfan
    馒头饭MADfan

    过来膜拜下评论里大神

    回复
  4. 牧风
    牧风

    我喜欢用index

    回复
  5. 麦田一根葱
    麦田一根葱博主

    被吞了...

    回复
  6. 麦田一根葱
    麦田一根葱博主

    ==刚刚发现跑到垃圾评论里去了

    回复
  7. IT青年
    IT青年

    不错的!问题应该解决了吧!

    回复
    1. 麦田一根葱
      麦田一根葱博主

      早已经解决了 哈哈

      回复
  8. tiandi
    tiandi

    随便看看。。。

    回复