javascript - 设置默认单选按钮+相关Div - Thinbug

设置默认单选按钮+相关Div

时间：2014-01-11 01:06:07

标签： javascript jquery html css jquery-ui

我正在创建一个小部件，它利用风格化的无线电和div来显示不同的数据位，基于贵金属商品的报价。当页面加载时，我需要默认加载收音机“当前”。使用checked="checked"确实检查启用无线电（通过加下划线标签），但它不会加载相关的div。我也需要div加载默认值。

HTML：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
 $(function() {
 $("[name=toggler]").click(function(){
        $('.toHide').hide();
        $("#blk-"+$(this).val()).show(100);
});
});
</script>
</head>
<body>
<div id="title">
    <text id="titletext">Commodities</text>
</div>
<div id="titleaccent">
</div>
<!--The form for the radio toggle buttons-->
<form name="range">
<input id="rdb1" class="radio" type="radio" name="toggler" value="1" >
<label for="rdb1">Current</label>
<input id="rdb2" class="radio" type="radio" name="toggler" value="2" >
<label for="rdb2">24-Hour</label>
<input id="rdb3" class="radio" type="radio" name="toggler" value="3" >
<label for="rdb3">Week</label>
<input id="rdb4" class="radio" type="radio" name="toggler" value="4" >
<label for="rdb4">Month</label>
</form>

<!--The div and associated data for each radio toggle button-->
<div id="blk-1" class="toHide" style="display:none">
Current commodity quote info here
</div>
<div id="blk-2" class="toHide" style="display:none">
24-hour comparison of commodity quote info here
</div>
<div id="blk-3" class="toHide" style="display:none">
Weekly comparison of commodity quote info here
</div>
<div id="blk-4" class="toHide" style="display:none">
Monthly comparison of commodity quote info here
</div>
</body>
</html>

CSS：

#title{
background-color: #103346;
height: 28px;
width: 305px;
}

#titletext{
color: #ffffff;
font-size: 15pt;
position: fixed;
    top: 11px;
    left: 18px;
}

#titleaccent{
background-color: #C3A43F;
height:  6px;
width: 305px;
}

.radio{
display: none;
margin: 10px;
}

.radio + label{
display:inline-block;
margin:-2px;
padding: 4px 12px;
}

.radio:checked + label{
text-decoration: underline;
}

2 个答案:

答案 0 :(得分：1)

使用一些`CSS`和`JS`：

http://jsfiddle.net/cW4DR/1/

$(function() {
    $("[name=toggler]").click(function(){
        $('.toHide').hide();
        $('.current').hide();
        $("#blk-"+$(this).val()).show(100);
    });
});

.toHide{
    display:none;
}
.current{
    display:block;
}

答案 1 :(得分：0)

执行：

<input type="radio" name="toggler" ... checked>

$(function(){
    var whatever = function(){
        $('.toHide').hide();
        $("#blk-"+$(this).val()).show(100);
    };
    $("[name=toggler]").click(whatever);
    $("[name=toggler]:checked").each(whatever);
});