结构描述：前端+后端+UI为一个独立的el-checkbox-group；

选项一+选项二为一个独立的el-checkbox-group；

两个独立的group处于一个大el-checkbox中；

实现目标：1.任意一个复选框的状态需要与全选框联动；

2.点击选项二后选项一被联动取消，在两个都被勾选的情况下取消选项一时选项二也被联动取消

示例代码：

<template>
  <div>
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      >全选</el-checkbox
    >
    <!-- MainChecked -->
    <!-- 定义第一个checkbox-grop， -->
    <el-checkbox-group
      v-model="MainChecked"
      @change="handleCheckedCitiesChange"
    >
      <el-checkbox v-for="obj in MainList" :label="obj.val" :key="obj.val">{{
        obj.name
      }}</el-checkbox>
    </el-checkbox-group>
    <!-- OtherChecked -->
    <el-checkbox-group v-model="OtherChecked">
      <el-checkbox
        v-for="obj in OtherList"
        :label="obj.val"
        :key="obj.val"
        @change="linkage(obj.val)"
        >{{ obj.name }}</el-checkbox
      >
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      checkAll: false,
      MainChecked: [],
      OtherChecked: [],
      MainList: [
        { name: '前端', val: 'qianduan' },
        { name: '后端', val: 'houduuan' },
        { name: 'UI', val: 'ui' }
      ],
      OtherList: [
        { name: '选项一', val: 'option1' },
        { name: '选项二', val: 'option2' }
      ],
      isIndeterminate: false,
      // 这里一定要将首次点击的初始值作为第一个，否则首次将无法选中第一个参数
      linkageval: 'option1'
    }
  },
  created () {},
  watch: {
    //  监听用户的点击项，当linkageval值发生改变的是执行代码
    linkageval () {
      if (this.linkageval === 'option2' && this.OtherChecked.length === 1) {
        this.OtherChecked = ['option1', 'option2']
      }
      if (this.linkageval === 'option1' && this.OtherChecked.length === 1) {
        this.OtherChecked = []
      }
    //  由于OtherList无法参与MainList的点击事件，这里可以手动调用方法计算个数
      this.handleCheckedCitiesChange()
    }
  },
  methods: {
    //  记录用户的点击项，当点击项发生改变时触发方法修改全选状态
    linkage (val) {
      this.linkageval = val
      this.handleCheckedCitiesChange()
    },
    handleCheckAllChange (val) {
      this.isIndeterminate = false
      // 触发了全选按钮，如果选中为true就返回所有内容，否则返回空数组
      this.checkAll = val
      this.MainChecked = val ? this.MainList.map(item => item.val) : []
      this.OtherChecked = val ? ['option1', 'option2'] : []
      // 如果全选中或全未选都取消-横杠样式
    },
    handleCheckedCitiesChange () {
      // 触发了单个按钮，如果选中按钮数>0且<按钮总数则显示isIndeterminate样式
      let allCount = this.MainList.length + this.OtherList.length
      let checkCount = this.MainChecked.length + this.OtherChecked.length
      //   console.log(this.MainChecked, this.OtherChecked, 'checkCount', 111111)
      this.isIndeterminate =
        checkCount > 0 && checkCount < allCount ? true : false
      // 如果选中个数=总数，则全选框状态为选中
      this.checkAll = allCount === checkCount ? true : false
    }
  }
}
</script>

<form id="common-form">         
  <input name="H1" type="checkbox" value="check1" />check1         
  <input name="H2" type="checkbox" value="check2" />check2          
  <input name="H3" type="checkbox" value="check3"/>check3      
</form>  
  
 
<script type="text/javascript">
  $(function() { 
   $('#common-form').find('input[type=checkbox]').bind('click', function(){           
	    var id = $(this).attr("id");                
	    //当前的checkbox是否选中        
	    if(this.checked){            
	    //除当前的checkbox其他的都不选中            
	    $("#common-form").find('input[type=checkbox]').not(this).attr("checked", false);                        
	     //选中的checkbox数量            
	     var selectleng = $("input[type='checkbox']:checked").length;
	     var select_val = $("input[type='checkbox']:checked").val();
	     console.log("选中的checkbox数量"+selectleng); 
	     console.log("选中的checkbox值"+select_val);
	   }
	     else{            
	     //未选中的处理           
	      console.log("未选中的处理");        
	      }   
       }); 
	})

</script>

转载于：https://blog.csdn.net/weixin_30532973/article/details/95691676?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.channel_param

在网上目前没有看到有人分享这些东西，我以为互联网是个非常需要分享的地方，所以将我的经验分享出来供大家参考。

需求：

在选中一个下拉框的时候，更改另一个checkbox的值。做一个联动。

实现：

监听select下拉框，当选中的时候相应更改型号。

代码：

<div class="layui-form-item">
    <label class="layui-form-label"><i class="required-color">*</i>回收故障：</label>

    <div class="layui-input-inline" id="rec_snag">
        <select name="rec_snag" id="rec_snag_list" lay-filter="rec_snag">
            <option>请选择</option>
            {volist name="recoverySnag" id="vo"}
            <option value="{$vo.id}" {if $vo.id==$data.rec_snag}selected="selected"{/if}>{$vo.name}</option>
            {/volist}
        </select>
    </div>
</div>

<div class="layui-form-item" style="margin-bottom: 30px">
    <label class="layui-form-label"><i class="required-color">*</i>回收型号：</label>
    <div class="layui-input-inline">
        <input lay-skin="primary" type="checkbox" id="checkall" name="type" lay-filter="allChoose" value="checkall"><span>全选</span>
    </div>
    <div class="layui-input-inline" id="rec_type">
        {volist name="rec_typeData" id="vo"}
        <?php
                $condition = 0;
                $temp = $data['rec_type'];
                if (strstr(strval($temp),strval($vo['id']))){
                $condition = 1;
                }
                 ?>
        <input type="checkbox"  class="layui-input-inline"  name="rec_type[]"  value="{$vo.id}" lay-skin="primary"  lay-filter="rec_type" class="spec-select" title="{$vo.name}"
               {if condition="$condition"}  checked="true" {/if}>

        {/volist}
    </div>
</div>

js部分：

form.on('select', function(data) {
    var obj = data.elem;
    var type = $(obj).attr('lay-filter');
    var value = data.value;

if (type == 'rec_snag' && value) {
        JsPost('{:url("Recoverycategories/recgetitemInfo")}', {
            id: value
        }, function(res) {
            if (res.status) {
                var e = res;
                var child = $("#rec_type input:checkbox[name='rec_type[]']");
                child.each(function (index, item) {
                    item.checked = false;
                });
                child.each(function (index, item) {
                    var das = e.data;
                    for(var i=0;i<das.length;i++){
                        if(das[i].id == item.value){
                            item.checked =true;
                        }
                    }
                });
                form.render('checkbox');
            }

        });
    }
});

 //点击全选, 勾选
    form.on('checkbox(allChoose)', function (data) {
        var child = $("#rec_type input:checkbox[name='rec_type[]']");
        child.each(function (index, item) {
            item.checked = data.elem.checked;
        });
        form.render('checkbox');
    });
});