Vue实现单选、全选和反选

当多个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

<label><input id="sel_1" onchange="selectAll()" type="checkbox" value="1"/>全选/全不选</label><br>

<input type="checkbox" value="2"/>

<input type="checkbox" value="3"/>

<input type="checkbox" value="4"/>

<input type="checkbox" value="5"/> 

</body> 

<script type="text/javascript">  

function selectAll(){

var isCheck=$("#sel_1").is(':checked')  //获得全选复选框是否选中

$("input[type='checkbox']").each(function() {  

this.checked = isCheck //循环赋值给每个复选框是否选中

})

}

</script>

希望能帮到你~

---