单选框input:radio

四、单选框

　　（一）语法

　　　　<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事件

　　　　　解决方案：

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

　　　　第二部分：JAVASCRIPT

/**
 * 判断是否是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>

2019年12月23日

　　jQuery获取选中单选框的值

var sex = $("input[name='LSSEX']:checked").val();

2022年4月25日16:08:26　　

绑定点击事件

$(function() {
	$('input:radio').click(function() {
						var inputName = $(this).attr('name');
						if ($('input[name="' + inputName + '"]:checked').val() == 2) {
							$('#SaveButton').prop('disabled', true);
							return;
						}
						
						var ISYBHG = $("input[name='ISYBHG']:checked").val();
						// 信息是否完整
						var ISYBWZ = $("input[name='ISYBWZ']:checked").val();
						// 是否具备检验条件
						var ISJBJY = $("input[name='ISJBJY']:checked").val();
						
						if (ISYBHG ==1 && ISYBWZ ==1 && ISJBJY ==1) {
							$('#SaveButton').prop('disabled', false);
						}
					});
});

 

写在最后

　　哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！

 相关推荐：

• 个人主页