Js、layui获取单选框radio的几种方法

2022-11-21 10:47:36

首先，编写HTML如下：

<form id="form1">
<table border="0">
<tr>
<td>年龄段：</td>
<td>
<input type="radio" name="age" value="18" />小于18岁
<input type="radio" name="age" value="18-40" checked="checked" />18-40岁
<input type="radio" name="age" value="40" />40以上
</td>
</tr>
<tr>
<td>分数：</td>
<td>
<input type="radio" name="score" value="60" />小于60分
<input type="radio" name="score" value="60-80" checked="checked" />60-80分
<input type="radio" name="score" value="80" />80分以上
</td>
</tr>
</table>
</form>

方法：

　　js:

function readradio() {
// 方法一
var item = null;
var obj = document.getElementsByName("age")
　　　for (var i = 0; i < obj.length; i++) { //遍历Radio
　　　　　if (obj[i].checked) {
　　item = obj[i].value;
}
}
alert(item);
// 方法二 jquery版本在1.3之前 (FF和chrome下无效)
item = $('input[name=age][checked]').val();
alert(item);
　// jquery 1.3 之后使用
item = $('input[name=age]:checked').val();
alert(item);
// 方法三 jquery 读取多个版本在1.3之前 (FF和chrome下无效)
$("input[type=radio][checked]").each(function() {
item = $(this).val();
alert(item);
})
// jquery 1.3 之后使用
　　 $("input[type=radio]:checked").each(function() {
item = $(this).val();
alert(item);
})

}

　　layui:

layui.use('form', function () {
　　var form = layui.form;

　　form.render(); // 加入这一句

　　//单选框点击事件（括号里边是lay-filter的值）
　　form.on('radio(erweima)', function (data) {
　　　　//alert(data.elem);
　　　　//console.log(data.elem);
　　　　//alert(data.value);//判断单选框的选中值
　　　　//console.log(data.value);
　　　　//alert(data.othis);
　　　　//layer.tips('开关checked：' + (this.checked ? 'true' : 'false'), data.othis);
　　　　//layer.alert('响应点击事件');
　　　　if (data.value == 1)
　　　　　　$('#fapiaohref').show();
　　　　else if (data.value == 0)
　　　　　　$('#fapiaohref').hide();
　　　});
});

注意：layui使用时表单控件必须放在form表单中

原文：https://blog.csdn.net/widenstage/article/details/68942496

码农公寓

相关文章