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节点拥有的全部函数和属性。

猜你喜欢

转载自blog.csdn.net/jsh_19869/article/details/108041343