Vue实现单选、全选和反选

Posted 2023-04-19

参考技术A 当多个checkbox通过 v-model 绑定到同一个数组时，每个checkbox被选中时，它的 value 会被添加到这个数组。

全选框通过 v-model 绑定到一个计算属性( checkAll )，这个属性必须实现了 getter 和 setter 方法，当model数组长度等于 fruits 长度，返回true，表示全选。改变checkbox的值时会触发 setter 方法，如果变为true，表示全选，如果变为false，表示全不选。

反选只关心checkbox值是否发生改变，并不关心值本身，所以没有为它设置v-model，而只是监听 change 事件

实现效果

对于checkbox和radio，如果不提供value， v-model 的值是true或false

如果提供value， v-model 的值是提供的value

jquery实现全选和反选功能

jQuery操作复选框的选中和不选中状态非常简单，使用attr()来设置"checked"属性的值，true未选中，false为未选中，在整个全选、反选过程中注意处理全选复选框的选中状态，以及获取选中选项的值。

<ul id="list">     
<li><label><input type="checkbox" value="1"> 1.我是记录来的呢</label></li>    
<li><label><input type="checkbox" value="2"> 2.哈哈，真的太天真了</label></li>    
<li><label><input type="checkbox" value="3"> 3.爱上你是我的错吗？</label></li>    
<li><label><input type="checkbox" value="4"> 4.从开始你就不应用爱上我</label></li>    
<li><label><input type="checkbox" value="5"> 5.喜欢一个人好难</label></li>    
<li><label><input type="checkbox" value="6"> 6.你在那里呢</label></li>  
</ul>  
<input type="checkbox" id="all">  
<input type="button" value="全选" class="btn" id="selectAll">   
<input type="button" value="全不选" class="btn" id="unSelect">   
<input type="button" value="反选" class="btn" id="reverse">   
<input type="button" value="获得选中的所有值" class="btn" id="getValue"> 

$(function () { 
  //全选或全不选 
  $("#all").click(function(){  
    if(this.checked){  
      $("#list :checkbox").attr("checked", true);  
    }else{  
      $("#list :checkbox").attr("checked", false); 
    }  
   }); 
  //全选  
  $("#selectAll").click(function () { 
     $("#list :checkbox,#all").attr("checked", true);  
  });  
  //全不选 
  $("#unSelect").click(function () {  
     $("#list :checkbox,#all").attr("checked", false);  
  });  
  //反选***** 
  $("#reverse").click(function () { 
     $("#list :checkbox").each(function () {  
       $(this).attr("checked", !$(this).attr("checked"));  
     }); 
     allchk(); 
  }); 
     
  //设置全选复选框 
  $("#list :checkbox").click(function(){ 
    allchk(); 
  }); 
    
  //获取选中选项的值 
  $("#getValue").click(function(){ 
    var valArr = new Array; 
    $("#list :checkbox[checked]").each(function(i){ 
      valArr[i] = $(this).val(); 
    }); 
    var vals = valArr.join(‘,‘); 
     alert(vals); 
  }); 
}); 
function allchk(){ 
  var chknum = $("#list :checkbox").size();//选项总个数 
  var chk = 0; 
  $("#list :checkbox").each(function () {  
    if($(this).attr("checked")==true){ 
      chk++; 
    } 
  }); 
  if(chknum==chk){//全选 
    $("#all").attr("checked",true); 
  }else{//不全选 
    $("#all").attr("checked",false); 
  } 
}

来自为知笔记(Wiz)