layui怎么设置checkbox勾选

介绍

layui是一套轻量级的前端UI框架，与jQuery紧密集成，在构建Web页面时减少了html和js的代码量，提高了开发效率。其中，layui中的checkbox组件可以方便我们创建复选框输入框。本篇文章将会详细介绍layui中checkbox组件如何设置勾选状态，包括初识、使用方式、常用API和示例。

初识checkbox组件

在layui中创建一个基本的checkbox很简单，我们可以通过HTML代码先创建一个checkbox，然后通过JavaScript代码来调用layui的渲染函数，即可完成checkbox的构建。

HTML代码

<div class="layui-form-item">
  <label class="layui-form-label">复选框</label>
  <div class="layui-input-block">
    <input type="checkbox" name="checkbox" title="同意协议" lay-skin="primary">
  </div>
</div>

JavaScript代码

layui.use('form', function(){
  var form = layui.form;
  //渲染
  form.render();
})

上述代码中，我们引用了layui中的form模块，并使用其提供的render方法来渲染HTML页面中的checkbox组件。在以上代码的效果中，我们创建了一个能够选择同意或不同意的checkbox。

使用方式

除了使用HTML代码来创建checkbox外，layui中还提供了更加简便的方式来创建checkbox组件。下面是两种常用方式：

方法一：通过layui.form.create方法

通过该方法可以快速创建一个checkbox组件，具体代码如下：

layui.use('form', function(){
  var form = layui.form;
  //创建checkbox
  var checkbox = form.create({  
    name: 'checkboxName',
    title: 'checkboxTitle',
    checked: true,
    elem: '#testCheckbox'
  });
});

在上述代码中，我们使用了create方法，创建了一个名为checkboxName，文本为checkboxTitle，初始状态为选中（checked为true），elem属性指定了该checkbox的DOM元素位置为#testCheckbox。

方法二：通过HTML数据属性

在HTML代码中，我们可以通过data属性来创建一个checkbox元素，具体代码如下：

<input type="checkbox" name="checkbox" title="同意协议" lay-skin="primary" data-foo="bar">

在上述代码中，我们通过data-foo属性给checkbox设置了一个自定义的属性foo，其值为bar。在JavaScript中可以通过checkbox.dataset.foo来获取该属性的值。

常用API

在使用layui的checkbox组件时，常用的API如下：

form.render()

用于渲染form表单中的所有元素，包括input、checkbox、radio等。

form.val()

用于设置和获取表单元素的值。其中，设置值需要传入两个参数，第一个参数为元素的name属性，第二个参数为要设置的值。

form.on()

在监听checkbox选择状态变化时，可以使用form.on()方法，该方法接受两个参数：第一个参数为事件名称，第二个参数为回调函数。例如：

layui.use('form', function(){
  var form = layui.form;
  form.on('checkbox(checkboxDemo)', function(data){
    console.log(data.elem); //得到checkbox原始DOM对象
    console.log(data.elem.checked); //是否被选中，true或者false
    console.log(data.value); //复选框value值，也可以通过data.elem.value得到
    console.log(data.othis); //得到美化后的DOM对象
  });
});

在上述代码中，我们监听了一个name属性为checkboxDemo的checkbox，当其状态被改变时，触发回调函数中的代码块。

示例

下面展示了一个包含复选框的表单，该表单中的复选框一旦被勾选，就会弹出一个确认框，输出该复选框的name属性值。

HTML代码

<form class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="checkbox1" title="同意协议" lay-skin="primary">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

JavaScript代码

layui.use(['layer', 'form'], function(){
  var layer = layui.layer;
  var form = layui.form;
  //监听表单提交事件
  form.on('submit(formDemo)', function(data){
    //获取被勾选的复选框DOM元素
    var checkbox = document.getElementsByName('checkbox1')[0];
    //判断是否被勾选
    if(checkbox.checked){
      //输出name属性值
      layer.alert('您已同意协议', {icon: 1});
    } else {
      layer.msg('请勾选同意协议');
    }
    //阻止表单跳转
    return false;
  });
  //渲染
  form.render();
});

在以上代码中，我们首先引用了layer模块，这是layui提供的弹层组件。接着使用layui.use加载form模块，监听表单提交事件。在回调函数中，我们利用document.getElementsByName获取了name属性为checkbox1的checkbox元素，判断其是否被勾选，如果被勾选，则输出一个确认框，提示用户已经同意协议。

总结

layui中的checkbox组件提供了丰富的使用方式和API接口，使用它可以极大地提高Web页面的开发效率和交互体验。