radio----单选按钮组(在一个页面实现多组单选按钮)
单选按钮组的html实现(bootstrap3.0库)
几个注意的点:
- 要让按钮显示激活状态,label的class里添加active属性
- 要使单选按钮真正具有激活状态,在之后js判断中能读取到,在input里加入checked属性:
<input ... checked...
- 一般在一个页面内,定义单选按钮组,肯定的只有一个能被选中,若是在一个页面内有多个单选按钮组,比如问卷小调查啥的,要有多个单选按钮组,将input里不同按钮组name命名要不同,相同按钮组name要相同。
<h3>group1</h3>
<div id="group1">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-info active">
<input type="radio" id="option1" checked name="radio-group1" value="1">option1
</label>
<label class="btn btn-info">
<input type="radio" name="radio-group1" value="1">option2
</label>
</div>
</div>
<h3>group2</h3>
<div id="group2">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-info active">
<input type="radio" checked name="radio-group2" value="1">option1
</label>
<label class="btn btn-info">
<input type="radio" name="radio-group2" value="1">option2
</label>
</div>
</div>
可以在菜鸟在线编辑器试试
取值(jQuery)
几种方法
.is(':checked'): //所有版本:true/false//!!!冒号
.attr(‘checked’): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
下面js框输入换换试试:
//alert($('#option1').attr("checked"))
//alert($('#option1').is(':checked'))
alert($($('#group1 :input').get(0)).is(":checked"))
alert($($('#group1 :input').get(1)).is(":checked"))