html radio元素取值

2017-06-18 39
摘要:html radio元素通常用于单项选择的业务,如性别选择、是否会员等场景,这里将介绍radio的创建和取值。

radio控件实际为<input type="radio" />,并且他本身是不显示文本,需要其他<label>、<span>等控件配合使用。

1. 创建

1.1 代码

<input type="radio" name="gender" value="male" checked id="gender_male"><label for="gender_male"></label>
<input type="radio" name="gender" value="female" id="gender_female"><label for="gender_female"></label>

1.2 效果

性别:


2. 取值

2.1 JavaScript原生

JavaScript原生取值比较麻烦,步骤如下:

1) 获取指定name下的所有radio

2) 遍历radio,获取checked为true的radio的值。

代码

var genderValue = '';
var radioList = document.getElementsByName('gender');
for (var i = 0, len = radioList.length; i < len; i++) {
    if (radioList[i].checked) {
        genderValue = radioList[i].value;
        break;
    }
}

示例


2.2 JQuery取值

代码

$('input[type=radio][name=gender]:checked').val()

示例


3. 属性

上面所需要用到的属性解释如下:

name :表示多个radio归属哪一个类型,相同name的radio只能被选中其中一个。

checked :默认勾选。

value :radio实际表示的值。





TOP