jquery求写一段关于单选框被选中时现实隐藏div的代码

发布网友发布时间：2022-05-16 03:03

共3个回答

懂视网时间：2022-05-16 07:25

刚开始学jquery，工作中有些css表单中的按钮美化很麻烦，所以想着用jquery来替换，复选框的jquery很容易，就是简单的样式切换效果，用toggleClass()方法即可。

而单选框之前一直不知道怎么做，因为在单选框中选中一个，其他的都必须移除掉样式，如果2个单选框在同级中则用siblings（）则可直接找到其他单选框移除掉样式即可。鉴于自己工作

是循环列表模式，每个<li>里面都带有一个单选框，未发现jquery中parent()这个好用的方法，以致于纠结了半天。

css如下：

效果如下：无论如何都只能一个添加样式,右边文字也随点击改变。

热心网友时间：2022-05-16 04:33

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        * { margin:0;padding:0;}
        .boxs {width:300px;margin:30px auto; }
        .check { border-bottom:2px solid #ccc;padding-bottom:10px;}
        .main { width:300px; border:1px solid #ccc; margin-top:10px;padding:10px;}
        .main .aaa {display:none; }
    </style>
</head>
<body>
<div class="boxs">
    <div  class="check">
         <label><input type="radio" name="sets"  checked="checked" />选择题</label>
         <label><input type="radio" name="sets" />填空题</label>
         <label><input type="radio" name="sets" />选择题</label>
    </div>
    <div class="main">
        <div class="aaa">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
        <div class="aaa">bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
        <div class="aaa">cccccccccccccccccccccccccccc</div>
    </div>
    <script type="text/javascript" src="http://s1.56img.com/script/lib/jquery/jquery-1.4.4.min.js"></script>
    <script>
        $(function () {
            $(".aaa").eq(0).show();
            $(".check label").click(function () {
                $(".aaa").hide();
                var theI = $(this).index();
                $(".aaa").eq(theI).show();
            })
        })
    </script>
</div>
</body>
</html>

热心网友时间：2022-05-16 05:51

$(":radio[name='xxx']").click(function(){
    var index = $(":radio[name='xxx']").index($(this));
    if(index == 1) //选中第2个时，div显示
        $(divSelector).show();
    else //当被选中的不是第2个时，div隐藏
        $(divSelector).hide();
});