layui获取checkbox选中值详解

一、基础知识

Checkbox是一种常用的表单元素，是一种多选组件。在layui框架中，使用Checkbox组件需要引入form模块。下面是一个Checkbox的基本示例：

<form class="layui-form">
  <div class="layui-form-item">
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读">
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
</form>

Checkbox的name属性值应该设置为一个数组，这样选中的值才能够组成一个数组传递给后台。title属性用于展示选项的名称。

二、获取选中值

在layui中，获取Checkbox选中值需要使用form模块里的一些方法。可以通过监听form的submit事件，触发回调函数，在回调函数里获取选中值。下面是一个示例：

//HTML代码
<form class="layui-form">
  <div class="layui-form-item">
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读">
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
  <button lay-submit lay-filter="formDemo">提交</button>
</form>

//JS代码
layui.use('form', function(){
  var form = layui.form;

  //监听提交
  form.on('submit(formDemo)', function(data){
    console.log(data.field.like); //获取选中的值
    return false; //阻止表单跳转
  });
}); 

在回调函数中，可以通过data.field来获取选中的值，其中“like”是Checkbox的name属性值。此时，data.field.like为一个数组，包含了选中的所有值。如果需要遍历选中值，可以使用for循环：

form.on('submit(formDemo)', function(data){
  var like = data.field.like;
  for(var i in like){
    console.log(like[i]); //遍历选中的值
  }
  return false;
});

三、修改选中值

在实际开发中，有些情况下需要修改Checkbox的选中值，可以使用form模块提供的方法去实现。下面是修改选中值的示例：

//HTML代码
<form class="layui-form">
  <div class="layui-form-item">
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读">
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
  <button id="setBtn">设置选中值</button>
  <button id="getBtn">获取选中值</button>  
</form>

//JS代码
layui.use('form', function(){
  var form = layui.form;
  
  //设置选中值
  $("#setBtn").click(function(){
    form.val('example', {
      'like[write]': true,
      'like[read]': true
    });
  });
  
  //获取选中值
  $("#getBtn").click(function(){
    console.log(form.val('example').like);
  });
  
  form.render(); //刷新表单渲染
}); 

在上面的示例中，设置选中值需要使用form.val方法，其中第一个参数是表单的lay-filter属性值。获取选中值也使用了form.val方法，但不需要设置第二个参数。需要注意的是，修改选中值完成后需要调用form.render方法来刷新表单的渲染。

四、checkbox的其他属性介绍

除了上面介绍的基本属性之外，Checkbox还有其他一些可以修改的属性。下面是这些属性的介绍：

• lay-skin：设置Checkbox的风格样式，如果不设置则为默认的复选框样式。lay-skin的取值有：primary（原始风格）、switch（开关风格）、primary（多选风格）、checkbox（多选风格，点选即选）、radio（单选风格）。
• lay-filter：过滤器，用于表单事件的回调函数。（在获取选中值时用到）
• lay-text：自定义文字，在label里面设置自定义文字，可以在选项名前面添加几个自定义的文字。
• lay-skin=”primary”的情况下，它还有lay-ignore属性，可以让它不提交。

下面是一个设置风格、过滤器和自定义文字的示例：

<form class="layui-form">
  <div class="layui-form-item">
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作" value="write" lay-skin="primary" lay-filter="like">
      <input type="checkbox" name="like[read]" title="阅读" value="read" lay-skin="primary" lay-filter="like">
      <input type="checkbox" name="like[dai]" title="发呆" value="dai" lay-skin="primary" lay-filter="like">
      <input type="checkbox" name="like[dai1]" title="发呆1" value="dai1" lay-skin="primary" lay-filter="like" lay-text="定时睡觉">
      <input type="checkbox" name="like[dai2]" title="发呆2" value="dai2" lay-skin="primary" lay-filter="like" lay-text="定时锻炼">
    </div>
  </div> 
</form>

其中lay-filter用于事件回调，lay-text用于添加自定义文字。

五、总结

本文从基础知识、获取选中值、修改选中值、Checkbox的其他属性等多个方面对layui获取checkbox选中值做了详细的阐述。希望能够对使用layui框架的开发者有所帮助。