layui如何既能获取节点,以单选框为例,又能监听单选框的选择状态,input类型

javascript中一般获取节点的方式为getElementById等等,前提是需要知道节点的id或是name等等,但问题来了,有时候我们的id是变化的,这样就不能写死,需要获取本节点的id才能进行下一步操作,这样就必须获取比如说单选框的节点。
比如说,我要写创建调查问卷的表单,用户可以自由增加题目,这样整个表单的id就不能固定,而是随着某个全局变量而变化,比如var count=1;count+=1;这种。
闲话少叙,直接上代码
一下是layui单选框

<div class="layui-form-item" >
                    <label class="layui-form-label">选择题型</label>
                    <div class="layui-input-block" >
                        <input type="radio" name="question_type" lay-filter="questionType"  value="0" title="单选题" checked="checked">
                        <input type="radio" name="question_type" lay-filter="questionType"  value="1" title="多选题" >
                        <input type="radio" name="question_type" lay-filter="questionType"  value="2" title="填空题" >
                        <input type="checkbox" name="is_must" title="是否必填" checked="checked" value="1">
                    </div>
                </div>

以下是监听单选框点击事件

layui.use(['jquery','form','upload','layer','laydate'],function () {
            var upload = layui.upload,layer = layui.layer;
            var form=layui.form;
            var $=layui.jquery;
            var laydate=layui.laydate;
            form.on("radio(questionType)", function (data) {
                if (data.value === '2') {
                    console.log(data);//此处将会输出单选框全部内容
                    console.log(data.elem);//此处将会输出单选框的DOM节点
                    console.log(data.elem.attributes[3].nodeValue);
                    //此处将会输出节点的第三个属性(也就是value)的值,同理,nodeType将会输出1——代表元素节点,以此类推
                } else if (data.value === '0'||data.value === '1'){

                }
            });
        });

也就是说,data.elem即为单选框所代表的节点,适用于DOM节点拥有的全部函数和属性。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui获取单选框的判断,可以通过以下步骤完成: 1. 给单选框添加一个相同的name属性,例如:name="gender"; 2. 使用layui的form模块获取表单元素,例如:var form = layui.form; 3. 使用form模块的on()方法监听表单提交事件,例如:form.on('submit(formDemo)', function(data){ ... }); 4. 在事件处理函数中,通过data.field对象获取表单元素的值,例如:var gender = data.field.gender; 5. 对获取到的值进行判断,例如:if(gender == '男'){ ... }。 示例代码如下: HTML代码: ``` <form class="layui-form" lay-filter="formDemo"> <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-block"> <input type="radio" name="gender" value="男" title="男"> <input type="radio" name="gender" value="女" title="女"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="submitDemo">提交</button> </div> </div> </form> ``` JavaScript代码: ``` var form = layui.form; //监听表单提交事件 form.on('submit(formDemo)', function(data){ //获取单选框的值 var gender = data.field.gender; //判断单选框的值 if(gender == '男'){ //执行操作 ... }else if(gender == '女'){ //执行操作 ... } //阻止表单跳转 return false; }); ``` 注意:在使用layui的form模块进行表单操作时,需要先引入layui.jslayui.css文件,并使用form.render()方法对表单进行渲染。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值