单选框

CreateTime--2017年5月15日11:40:04

Author:Marydon

四、单选框

　　（一）语法

　　　　<input type="radio"/>

　　（二）实现点击文字，选中对应按钮的两种方式

　　方式一：label标签体包住单选框标签

<label class="radioStyle"><input type="radio" class="radioStyle" name="test1" value="0" checked/>男</label>
<label class="radioStyle"><input type="radio" class="radioStyle" name="test1" value="1"/>女</label　　

　　方式二：label标签体只包住文本

<input type="radio" class="radioStyle" name="test2" value="0" id="yes"/><label for="yes" class="radioStyle">是</label>
<input type="radio" class="radioStyle" name="test2" value="1" id="no" checked/><label for="no" class="radioStyle">否</label>

　　注意：

　　　　1.同一组单选框必须使用同一个name；

　　　　2.单选框没有默认选中值，要想默认选中，必须声明checked属性；

　　　　3.方式二label标签的for属性的值必须与单选框的id值保持一致。

　　（三）单选框的onchange事件

　　示例：

　　　　通过单选框的选中状态来实现其他元素的显示或隐藏

　　　　第一部分：HTML

是否替诊
<label style="cursor: pointer;">
<input type="radio" name="REPLACE_TZ" value="0" style="cursor: pointer;"
onchange="$('#REPLACE_TZ_NAME').show();"/>
是
</label>
<label style="cursor: pointer;">
<input type="radio" name="REPLACE_TZ" value="1" style="cursor: pointer;"
onchange="$('#REPLACE_TZ_NAME').hide();" checked/>
否
</label>
替诊医生名称
<select id="REPLACE_TZ_NAME" name="REPLACE_TZ_NAME" style="display: none;">
<option value="">请选择</option>
<option value="1">医生一</option>
<option value="2">医生二</option>
<option value="3">医生三</option>
</select>

　　注意：

　　　　1.同一组单选框必须使用同一个name；

　　　　2.同一组的每个单选框都得绑定onchange事件；

　　　　3.单选框及复选框的onchange事件在IE浏览器运行时存在的问题：

　　　　　　在IE中却不会正常执行，即选中或取消复选框不会立即执行

　　　　　原因：

　　　　　　IE会等到单选框或复选框失去焦点之后才会触发onchange事件

　　　　　解决方案：

　　　　　　绑定点击事件，手动触发失焦、聚焦事件　　

/**
* 判断是否是IE浏览器，支持IE6-IE11
*/
function isIE() { //ie?
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}
window.onload = function () {
if(!isIE()) return;
/*
* 是否替诊，单选框绑定点击事件
*/
$('input:radio[name=REPLACE_TZ]').click(function () {
this.blur();
this.focus();
});
}

　　实现效果： 　

　　　　单选框被选中时，显示隐藏的下拉框，取消选中时，再隐藏下拉框。

　　UpdateTime--2017年6月13日14:51:06

　　（四）单选框设置默认选中项

　　单选框没有默认选中项，如果需要指定选项选中，需要在该单选框添加属性：checked

　　举例：

<label class="radioCss">
<input name="CANCEL_CONSULT" type="radio" value="1" checked/>
不再需要
</label>
<label class="radioCss">
<input name="CANCEL_CONSULT" type="radio" value="2" />
患者转院
</label>
<label class="radioCss">
<input name="CANCEL_CONSULT" type="radio" value="3" />
其他
</label>

 相关推荐：

• 类似文章