这篇文章距离上次修改已过半年,其中的信息可能已经有所发展或是发生改变。

转换为语音并朗读全文 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

    <pre>
    <!DOCTYPE html>
    <html lang="en">
    <head>

    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
        #fake-tips-1 .children{
            display: none;
        }
    &lt;/style&gt;

    </head>
    <body>

    &lt;div class="main"&gt;
        &lt;div id="fake-form-1"&gt;
            // 不用ID了
            &lt;label&gt;&lt;input type="radio" name="imradio" id="radio_1" class="bymt_radio"  value="radio_1"/&gt;radio1&lt;label&gt;
            &lt;label&gt;&lt;input type="radio" name="imradio" id="radio_2" class="bymt_radio"  value="radio_2"/&gt;radio2&lt;label&gt;
            &lt;label&gt;&lt;input type="radio" name="imradio" id="radio_3" class="bymt_radio" value="radio_3" /&gt;radio3&lt;label&gt;
            &lt;label&gt;&lt;input type="radio" name="imradio" id="radio_4" class="bymt_radio" value="radio_4"/&gt;radio4&lt;label&gt;
        &lt;/div&gt;    
        &lt;div id="fake-tips-1"&gt;
            &lt;div class="children radio_1"&gt;radio1 text&lt;/div&gt;
            &lt;div class="children radio_2"&gt;radio2 text&lt;/div&gt;
            &lt;div class="children radio_3"&gt;radio3 text&lt;/div&gt;
            &lt;div class="children radio_4"&gt;radio4 text&lt;/div&gt;
        &lt;/div&gt;

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

    回复
  2. znboy
    znboy

    表示ie11也崩溃的

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

    过来膜拜下评论里大神

    回复
  4. 牧风
    牧风

    我喜欢用index

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

    被吞了...

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

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

    回复
  7. IT青年
    IT青年

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

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

      早已经解决了 哈哈

      回复
  8. tiandi
    tiandi

    随便看看。。。

    回复