radio----单选按钮组(在一个页面实现多组单选按钮)

radio----单选按钮组(在一个页面实现多组单选按钮)

        • 单选按钮组的html实现(bootstrap3.0库)
        • 取值(jQuery)

单选按钮组的html实现(bootstrap3.0库)

几个注意的点:

  • 要让按钮显示激活状态,label的class里添加active属性
  • 要使单选按钮真正具有激活状态,在之后js判断中能读取到,在input里加入checked属性:
  • 一般在一个页面内,定义单选按钮组,肯定的只有一个能被选中,若是在一个页面内有多个单选按钮组,比如问卷小调查啥的,要有多个单选按钮组,将input里不同按钮组name命名要不同,相同按钮组name要相同。
<h3>group1h3>
<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>group2h3>
<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"))

radio----单选按钮组(在一个页面实现多组单选按钮)_第1张图片

参考:input type=“radio” jquery判断checked的三种方法

你可能感兴趣的:(Web)