欢迎访问宙启技术站
智能推送

使用layui怎么动态设置checbox 选中状态

发布时间:2023-05-18 22:41:13

在 layui 中,可以使用以下 JS 代码设置 checkbox 的选中状态:

1. 获取 checkbox 对象

首先,需要获取 checkbox 对象。在 layui 中,可以使用 element 模块的方法获取 checkbox 对象。例如:

var $ = layui.$;
var form = layui.form;
var checkbox = $('input[name="test"]');

其中,checkbox 变量表示获取到的 checkbox 对象。

2. 设置 checkbox 的选中状态

设置 checkbox 的选中状态,可以使用 JS 的 checked 属性,例如:

checkbox[0].checked = true;  //选中      个 checkbox

3. 刷新渲染

最后,为了让更改生效,需要刷新表单的渲染。在 layui 中,可以使用 form 模块的 render 方法刷新表单的渲染。例如:

form.render('checkbox');

其中,checkbox 表示要渲染的表单元素类型。如果是多个元素类型,可以用一个数组表示,例如 ['checkbox', 'select']

完整的代码示例:

<!-- HTML 模板 -->
<body>
  <div class="layui-form">
    <input type="checkbox" name="test" value="1" title="checkbox1">
    <input type="checkbox" name="test" value="2" title="checkbox2">
    <input type="checkbox" name="test" value="3" title="checkbox3">
  </div>

  <button id="btn">选中第二个 checkbox</button>

  <script src="layui/layui.js"></script>
  <script>
    // JavaScript 代码
    var $ = layui.$;
    var form = layui.form;
    var checkbox = $('input[name="test"]');

    $('#btn').on('click', function() {
      checkbox[1].checked = true; //选中第二个 checkbox
      form.render('checkbox'); //刷新表单渲染
    });
  </script>
</body>

以上就是使用 layui 动态设置 checkbox 的选中状态的方法。