android checkbox监听另一个checkbox选中和不选中_LayUI表单事件监听及初始化赋值

表单风格分两种：

1. 默认风格：什么都不需要设置
2. 方框风格：在form元素添加class=“layui-form-pane”;

在js中对元素界面操作主要是学习给标签添加样式，在内置模块中主要是学习如何引用模块，对标签的行为操作

一、更新渲染

因为在LayUI中下拉列表、单选框、复选框都不是通过原生态的表单标签来实现的，而是自己书写标签和样式来实现，所以想动态的添加这些元素，添加后需要渲染！！！

语法：form.render({"select|checkbox|radio"});

​ 如果设置了参数，就是指点渲染下拉列表，单选框，复选框中的某一个

​ 如果，没有设置参数，就默认渲染整个表单元素

​ 动态的给下拉列表下拉列表，单选框，复选框添加标签的实现步骤：

​ a)给原生的表单添加元素节点（普通的jQuery语法，或者DOM语法添加元素）

​ b)渲染表单

二、事件监听

LayUI的form表单事件监听语法：

​ form,on('select(事件过滤器)',function(data){

​ console.log(datd);

})

可提供的事件监听类型

select 下拉列表

checkbox 复选框勾选

switch 复选框开关

radio 单选框

submit 表单提交

注意：1.为下拉列表添加监听时不使用原生的change事件，因为原生的change事件被隐藏了

​ 2.事件过滤器放在需要监听的事件上，而不是父类上，就是放在select、checkbox、switch、radio、submit这几个标签上

​ 3.单选框，复选框没有添加value值，默认就是on

​ 4.提交submit提交监听

​ 有以下注意点：

​ a)开关按钮，只有选中的时候才会收集结果，如果没有选中则忽略不收集。 ​ b)复选框和可以多选下拉列表，如果复选框的name属性值相同，那么只能获取一个选中的复选框。

解决代码如下：

//使用each将选中的复选框进行提取
$.each($("#checkbox > input:checked"),function (index,element) {
  console.log($(element).attr("name")+"："+$(element).val())；
});

三、表单初始赋值

form.val('lay-filter的值', object);

lay-filter的值：事件过滤器的值

object：要填充的对象，通常是以键值对的形式，例如：

/**
 *  为form表单初始赋值
 */
var obj = {
    //元素的name属性值：元素的value属性值
    username : "admin123",
    password : "123456",
    like : ["1","2"],
    isOpen : false,
    sex : "女",
    interest : "2"
};
// 给表单初始赋值，但是无法实现对复选框赋值
form.val("from-test", obj);

在给表单初始化赋值，但是无法实现对复选框赋值，所以要对复选框单独赋值，赋值方法如下：

步骤：1.先在form.val()方法中给复选框赋值

​ 2.再用以下方法进行匹配，将选中的复选框设为true

$.each($("#checkbox > input"), function (index, element) {
    // 假设element应该不会被选中
    var flag = false;
    $.each(obj.like, function (index, value) {
        // 判断element的value值是否和所赋的value匹配
        if($(element).val() === value) {
            // 推荐假设，应该被选中
            flag = true;
        }
    });
    // 设置复选框的选中状态
    $(element).prop("checked", flag);
    // 渲染复选框
    form.render("checkbox");
});