四、单选框
(一)语法
(二)实现点击文字,选中对应按钮的两种方式
方式一:label标签体包住单选框标签
方式二:label标签体只包住文本
注意:
1.同一组单选框必须使用同一个name;
2.单选框没有默认选中值,要想默认选中,必须声明checked属性;
3.方式二label标签的for属性的值必须与单选框的id值保持一致。
(三)单选框的onchange事件
示例:
通过单选框的选中状态来实现其他元素的显示或隐藏
第一部分:HTML
注意:
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
举例:
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);
}
});
});
写在最后
哪位大佬如若发现文章存在纰漏之处或需要补充更多内容,欢迎留言!!!
作者:Marydon,