layui复选框监听事件

在 layui 中，可以使用 form 模块的 on() 方法来监听复选框的选择事件。具体步骤如下：

1. 在 HTML 中添加复选框：

<input type="checkbox" name="checkbox" lay-skin="primary" title="复选框">

2. 在 JavaScript 中使用 form.on() 方法监听选择事件：

layui.use(['form'], function () {
  var form = layui.form;
  form.on('checkbox', function (data) {
    console.log(data.elem); // 得到checkbox原始DOM对象
    console.log(data.elem.checked); // 是否被选中，true或者false
    console.log(data.value); // checkbox的value值，如果没有value值则返回on
    console.log(data.othis); // 得到美化后的DOM对象
  });
});

在监听事件中，可以通过 data.elem.checked 属性来获取复选框的选中状态，如果需要获取复选框的 value 值，可以通过 data.value 属性来获取，如果没有设置 value 值，则默认返回 on。

相关问题

layui复选框事件

### 回答1：
如果你使用了 layui 的复选框组件，那么你可以使用以下的代码来监听复选框的选中事件和取消选中事件：

// 监听复选框选中事件
form.on('checkbox(checkboxName)', function(data){
  console.log(data.elem); // 得到checkbox原始DOM对象
  console.log(data.value); // 得到checkbox的value值，比如：'on'
  console.log(data.othis); // 得到美化后的DOM对象
});

// 监听复选框取消选中事件
form.on('checkbox(checkboxName)', function(data){
  console.log(data.elem); // 得到checkbox原始DOM对象
  console.log(data.value); // 得到checkbox的value值，比如：'on'
  console.log(data.othis); // 得到美化后的DOM对象
});

其中，`checkboxName` 是你的复选框的 lay-filter 属性值，用于指定监听哪个复选框组件的事件。在事件处理函数中，你可以通过`data.elem`获取原始的 checkbox DOM 对象，通过`data.value`获取 checkbox 的 value 值，通过`data.othis`获取美化后的 DOM 对象。

### 回答2：
Layui是一个基于jQuery的前端UI框架，提供了丰富的UI组件和丰富的交互功能。其中的复选框也具备了一系列的事件来满足我们的需求。

在Layui中，复选框事件主要有两个：监听复选框选中和取消选中的事件以及获取选中的复选框的value值。

监听复选框选中和取消选中的事件可以通过监听checkbox的change事件来实现，代码如下：

form.on('checkbox', function(data){
  if(data.elem.checked){ // 复选框被选中
    console.log('复选框选中');
  }else{ // 复选框取消选中
    console.log('复选框取消选中');
  }
});

在上面的代码中，通过监听checkbox的change事件，当复选框被选中时会输出"复选框选中"，当取消选中时会输出"复选框取消选中"。

获取选中的复选框的value值可以通过遍历所有的复选框并判断是否被选中，代码如下：

var checkedValues = [];
$(".layui-form-checkbox").each(function(){
  if($(this).hasClass("layui-form-checked")){
    checkedValues.push($(this).prev().val()); // 将选中的复选框的value值添加到checkedValues数组中
  }
});
console.log(checkedValues);

在上面的代码中，通过遍历所有的复选框，判断是否有"layui-form-checked"这个类名，有则代表复选框被选中，然后通过prev()方法获取复选框的前一个元素，即复选框的input元素，再通过val()方法获取input元素的value值，并将其添加到checkedValues数组中。

以上就是关于Layui复选框事件的简单介绍和实现方式。希望能对你有所帮助。

### 回答3：
layui复选框事件是指在使用layui框架中，对复选框进行操作时触发的相关事件。

在layui框架中，复选框的事件有两种：选择和取消选择。当复选框被选择时，会触发选择事件；当复选框被取消选择时，会触发取消选择事件。

在使用layui框架时，可以通过监听复选框的事件来执行相应的操作。具体的实现步骤如下：

1. 使用layui框架提供的form模块，通过form.on函数监听复选框的事件。例如，监听复选框的选择事件可以使用如下代码：
form.on('checkbox(checkboxName)', function(data){
// 复选框选择事件的处理逻辑
// data.value获取被选择的复选框的值
});

2. 在事件处理函数中，可以获取被选择的复选框的值，并执行相应的操作。例如，可以通过data.value获取到被选择的复选框的值，并根据需要执行相应的逻辑操作。

需要注意的是，以上代码中的checkboxName需要替换为具体的复选框的name属性值。

总结来说，layui复选框事件是通过监听复选框的选择和取消选择事件来执行相应的操作。通过使用layui框架提供的form模块，并使用form.on函数来监听复选框的事件，可以轻松地实现对复选框的操作。

layui复选框被选中事件

在 layui 中，复选框被选中事件可以通过监听 form 模块的 checkbox() 方法来实现。具体的代码如下：

layui.use('form', function(){
  var form = layui.form;
  
  //监听复选框被选中事件
  form.on('checkbox', 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.elem.getAttribute('name')); //复选框name属性值
  });  
});

在上述代码中，我们通过 layui.use('form', function(){...}) 方法加载了 layui 的 form 模块。然后，我们通过 form.on('checkbox', function(data){...}) 方法监听了复选框被选中事件，并在事件回调函数中处理相关逻辑。其中，data 参数是一个对象，包含了复选框的相关信息，如复选框的 DOM 对象、是否被选中、value 值和 name 属性值等。