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

首先，编写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:

<link rel="stylesheet" type="text/css" href="<%= this.ResolveUrl("~/ui/layui/layuiadmin/layui/css/layui.css") %>" />
<link rel="stylesheet" type="text/css" href="<%= this.ResolveUrl("~/ui/layui/layuiadmin/style/admin.css") %>" />

<form class="layui-form" action="" lay-filter="example">
　　<table>
　　　　<tr>
　　　　　　<td style="border: none">
　　　　　　　　<input type="radio" name="sj" lay-filter="erweima" value="1" title="年" id="n" checked="checked" /></td>
　　　　　　<td style="border: none">
　　　　　　　　<input type="radio" name="sj" lay-filter="erweima" value="2" title="季度" id="jd" /></td>
　　　　　　<td style="border: none">
　　　　　　　　<input type="radio" name="sj" lay-filter="erweima" value="3" title="月" id="m" /></td>
　　　　</tr>
　　</table>
</form>

<script type="text/javascript" src="<%= this.ResolveUrl("~/ui/layui/layuiadmin/layui/layui.js") %>"></script>

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

如有问题，欢迎留言！