精华内容
下载资源
问答
  • 首先,官方文档所给出的展示如下:监听 radio单选 但是在搜索经验的时候,发现很多网友给出的代码有缺失,不适合小白开发 所以,小小整理一番,欢迎指摘 … 操作步骤: 首先 html 设计效果如下: 对应的源码为: ...
    • 首先,官方文档所给出的展示如下:监听 radio单选
    • 但是在搜索经验的时候,发现很多网友给出的代码有缺失,不适合小白开发
    • 所以,小小整理一番,欢迎指摘 …

    操作步骤:

    1. 首先 html 设计效果如下:

      对应的源码为:
     <div class="layui-form-item">
            <label class="layui-form-label">主题类型:</label>
                <div class="layui-input-inline" style="width: 660px">
                    <input type="radio" name="level" lay-filter="levelM" value="1" title="一级分类" {$theme.level=="1"?"checked":""}>
                    <input type="radio" name="level" lay-filter="levelM" value="2" title="二级分类" {$theme.level=="2"?"checked":""}>
                    <input type="radio" name="level" lay-filter="levelM" value="3" title="三级分类" {$theme.level=="3"?"checked":""}>
                </div>
        </div>
    

    【注】:

     注意上述源码总的 "lay-filter" 属性;
     此处需要填写一个用于区分监听事件的名称,我定为:"levelM"
    
     因为鄙人在进行 ThinkPHP 框架代码开发,所以其种牵扯到了部分内置代码,可自行忽略
    
    1. 然后就是 JavaScript 代码的编写,完整的代码如下:
    	    layui.use(['form'], function () {
            var upload = layui.upload;
            var form = layui.form;
            //此处即为 radio 的监听事件
            form.on('radio(levelM)', function(data){
            	console.log(data.elem); //得到radio原始DOM对象
      			console.log(data.value); //被点击的radio的value值
                var level = data.value;//被点击的radio的value值
    			//TODO 下面是我具体业务的处理代码,可忽略 ...
                $(".sel-parent-msg").hide();
                $(".sel-parent-msg-"+level).show();
           		 });
            });
    
    • 好像,大概,也许,差不多就是这样的了 …
    展开全文
  • //html代码单选框//js代码layui.use(['form', 'layer', 'jquery' ], function () {$ = layui.jquery;var layer = layui.layer,form = layui.form;//监听多选框点击事件 主要是通过 lay-filter="sex" 来监听form.on('...

    //html代码

    单选框

    //js代码

    layui.use(['form', 'layer', 'jquery' ], function () {

    $ = layui.jquery;

    var layer = layui.layer,

    form = layui.form;

    //监听多选框点击事件 主要是通过 lay-filter="sex" 来监听

    form.on('radio(sex)', function (data) {

    console.log( data );  //打印当前选择的信息

    if( data.elem.checked){      //判断当前多选框是选中还是取消选中

    alert('当前选中');

    }else{

    alert('取消选中')

    }

    var value = data.value; // 当前选中的value值

    });

    }

    展开全文
  • 1,效果图 2,功能说明 当我选择【按实际设备】时,数据版本控件可以操作, 当我选择【按设备标准】时,数据版本控件禁用,不可操作 3,代码 <...label class="layui-form-label" style="margin

    1,效果图

    在这里插入图片描述

    2,功能说明

    当我选择【按实际设备】时,数据版本控件可以操作,

    当我选择【按设备标准】时,数据版本控件禁用,不可操作

    3,代码

    
    
       <div class="flex flex-align-center flex-jusity-center height26">
            <div class="layui-form-item flex">
                <label class="layui-form-label" style="margin-left: -15px;">模型</label>
                <div class="layui-input-block marginleft10">
                    <div class="layui-input-block">
                        <input type="radio" name="cbmodel" value="half" lay-filter="cbmodel" lay-skin="primary" title="按实际设备">
                        <input type="radio" name="cbmodel" value="all" lay-filter="cbmodel" lay-skin="primary" title="按设备标准">
                    </div>
                </div>
            </div>
        </div>
    
        <div class="flex flex-jusity-center flex-align-center height26">
            <div class="layui-form-item flex">
                <label class="layui-form-label" style="margin-left: -16px">数据版本</label>
                <div class="layui-input-block marginleft10" >
                    <select id="version" class="layui-select" name="version" lay-filter="version" onclick="excepttask()" >
                        <option value=""></option>
                    </select>
                </div>
                <%--<div class="layui-form-mid layui-word-aux colorred">*</div>--%>
            </div>
        </div>
    
    
    
    
    
    
    
    
    	layui.use(['form'], function () {
    	
    		//从后台获取数据版本的下拉值
            selectdata();
    
            layui.form.on('radio(cbmodel)', function (data) {
                if(data.value=="half"){
                    // $('#version').removeAttr("hidden");
                    //选择【按实际设备】,移除禁用属性
                    $('#version').removeAttr("disabled");
                    layui.form.render('select');
                }else{
                    // $('#version').attr("hidden","true");
                    //选择【按设备标准】,添加禁用属性
                    $('#version').val('')
                    $('#version').attr("disabled","disabled");
                    layui.form.render('select');
                }
            });
    
    
    
    
    
    	function selectdata() {
    	
            $.ajax({
                url: '/**/toversionList',
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    $.each(data.list, function (index, item) {
                        $('#version').append(new Option(item.version, item.version));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");
                }
            })
        }
    
    展开全文
  • 最近在做Coral项目的时候遇到这样一个问题:Layui中怎么动态监听radio单选框的事件,下面先来看一段代码: <html> ... <form> <input type="radio" name="type" value="1" title="菜单" checked&...

    最近在做Coral项目的时候遇到这样一个问题:Layui中怎么动态监听radio单选框的事件,下面先来看一段代码:

    <html>
    ...
        <form>
            <input type="radio" name="type" value="1" title="菜单" checked>
            <input type="radio" name="type" value="2" title="按钮">
        </form>
    ....
    </html>
    
    <script>
        $('input[type=radio][name=type]').change(function() {
            alert($("input[name='type']:checked").val());
        });
    </script>

    以上<script>代码块是我们引用 jQuery常规写法,按道理是当你切换<html>部分的单选框时应该会alert出选中的值,但经项目调试后事实证明上面的JS部分代码是无效的!那么问题来了,为什么会不好使呢?这不是标准的 jQuery语法吗?

    经过上网一番查询得到答案,固记录一下作为备忘。

    因为使用了layui以后,单选框(以及复选框、下拉框等等)要用form提供的监听语法来实现。原因是经过layui的form组件处理之后,你看到的“单选框”、“复选框”、“下拉选择”,这些被美化的东东,实际上不是原始的节点,原始的节点都到幕后去了,所以绑定在原始节点上事件是没用的。

    【Layui官方建议】:既然使用组件,那就充分利用它,既然它都给你提供了这些表单元素对应的事件了,那就用它的事件监听方式就可以了。

    Layui语法写法如下:

    <html>
    ...
        <form>
            <input name="type" type="radio" lay-filter="rightType" value="1" title="菜单" checked/>
            <input name="type" type="radio" lay-filter="rightType" value="2" title="按钮"/>
        </form>
    ....
    </html>
    
    <script>
        layui.use(['form'], function(){
    
            var form = layui.form();
        
            //这里'radio(rightType)' 一定要注意 rightType是filter 请在上方input增加lay-filter属性
            form.on('radio(rightType)', function(data){
              console.log(data.elem); //得到radio原始DOM对象
              console.log(data.value); //被点击的radio的value值
            });  
        });
    </script>

    注:这里'radio(rightType)' 一定要注意 rightType是filter 请在上方input增加lay-filter属性

    展开全文
  • layui单选按钮监听

    2020-01-04 20:04:42
    <input type="radio" name="project" value="系统" title="系统" <c:if test="${menu.projectCode eq '系统'}">checked</c:if> lay-filter="projectFilter"/> ...form.on('radio(projectFilter)',...
  • 今天小编就为大家分享一篇浅谈监听单选框radio改变事件(和layui中单选按钮改变事件),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 若是只引用jquery的话,监听单选按钮改变事件如下: &lt;input type="radio" name="sex" checked="checked" value="1"&gt;男 &lt;input type="radio"...
  • 浅谈监听单选框radio改变事件(和layui中单选按钮改变事件),单选框radio若是只引用jquery的话,监听单选按钮改变事件如下:男女$(document).ready(function() {$('input[type=radio][name=sex]').change(function() ...
  • layui单选框事件监听

    千次阅读 2019-11-20 15:15:58
    layui单选框事件监听 <form class="layui-form dianxuan" action=""style="float: left;margin-top: 7px;margin-right: 20px;"> <div class="layui-form-item"> <label class="layui-form-label...
  • Layui中使用Js代码对两个单选按钮之间的禁用与启用 需求是这样的: 当点击相互作用时,严重等级的单选按钮前两个禁用并默认选中"相互作用"按钮。 当点击配置禁忌时,严重等级最后一个按钮禁用,并默认选中"配伍...
  • 获取layui单选按钮的值

    千次阅读 2019-06-03 16:08:24
    let title = $('input[name="title"]:checked ').val();
  • layui radio单选限制下一个radio单选

    千次阅读 2018-07-26 15:03:40
    本demo的效果是单选框一有a和b两个选项按钮单选框二有q和w两个选项按钮, 选中a,使得q不可选,w选中;选中b,使得w不可选,q选中 下面是完整的代码,需要引入layui.js,layui.css &lt;!DOCTYPE html&...
  • layui动态表格监听单选框单击事件

    千次阅读 2019-05-10 15:10:26
    layUI的动态表格插件,指定当前列是单选框,那么如何获得单击事件并拿到当前行数据呢? 话不多说,上码! // 框架初始化 $(function(){ layui.use(['table','laydate','layer'], function() { var table = layui....
  • 监听layui 单选框选中事件

    千次阅读 2019-07-02 16:08:25
    // 监听单选框选中事件 <input type="radio" name="beshared" value="0" title="开启" lay-filter="beshared" checked> <input type="radio" name="beshared" value="1" title="关闭" lay-filter=...
  • layui table单选框选中事件

    千次阅读 2018-10-24 11:44:43
    单选框选中事件监听: table.on(‘radio(demo)’, function(obj){ //查看obj结构 // console.log(obj); //是否选中,选中为true // console.log(obj.checked); //选中行的数据 // console.log(obj.data...
  • 由于表格是layui的方法渲染完成的,所以使用js无法获取到某个表格的tr(等待方法),只能使用layui的方法table.cache.testReload(testReload为table.render中的id); 在仅仅进行上下移动表格行后,layui无法获取...
  • 今天小编就为大家分享一篇layui 点击重置按钮, select 并没有被重置的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 282
精华内容 112
关键字:

layui监听单选按钮