用JQuery中的prop实现html中的多选框全选

假设你的多选框id为“checkbox”，全选按钮id为“checkAll”，实现代码如下：

$(function(){
    //点击全选按钮，将所有多选框选中
    $("#checkAll").click(function(){
        $("#checkbox input[type='checkbox']").prop("checked",true);
    });
    //点击取消全选按钮，将所有多选框取消选中
    $("#uncheckAll").click(function(){
        $("#checkbox input[type='checkbox']").prop("checked",false);
    });
});

其中，prop("checked",true/false)用于设置多选框的选中状态。通过选择器选中多选框，再将其选中状态设置为true或false即可实现全选或取消全选的功能。

相关问题

用prop实现html中的多选框全选

HTML代码：

<input type="checkbox" id="selectAll" />全选
<br />
<input type="checkbox" class="checkbox" />选项1
<br />
<input type="checkbox" class="checkbox" />选项2
<br />
<input type="checkbox" class="checkbox" />选项3

JavaScript代码：

var app = new Vue({
  el: '#app',
  data: {
    selectedAll: false,
    checkboxes: []
  },
  methods: {
    selectAll: function() {
      this.checkboxes = this.selectedAll ? ['1', '2', '3'] : [];
    }
  },
  watch: {
    checkboxes: function(val) {
      this.selectedAll = val.length === 3;
    }
  }
});

解释：

- 使用Vue实例来绑定HTML中的元素
- 使用v-model指令将多选框的值绑定到Vue实例中的一个数组
- 使用一个全选的复选框，将其值绑定到Vue实例中的一个布尔值
- 使用computed属性来计算全选的复选框是否应该被选中
- 使用watch属性来监听多选框的值的变化，当全部选中时，全选的复选框也应该被选中

用prop实现html中的多选框全选，单选，反选

以下是一个简单的示例，使用Vue.js来实现多选框的全选、单选和反选：

HTML代码：

<div id="app">
  <input type="checkbox" v-model="selectAll" @change="selectAllCheck">
  <label>全选</label>
  <br>
  <input type="checkbox" v-model="checkedItems" value="1">
  <label>选项1</label>
  <br>
  <input type="checkbox" v-model="checkedItems" value="2">
  <label>选项2</label>
  <br>
  <input type="checkbox" v-model="checkedItems" value="3">
  <label>选项3</label>
  <br>
  <button @click="checkAllItems">全选</button>
  <button @click="uncheckAllItems">全不选</button>
  <button @click="invertSelection">反选</button>
</div>

Vue.js代码：

new Vue({
  el: '#app',
  data: {
    checkedItems: [],
    selectAll: false
  },
  methods: {
    selectAllCheck: function() {
      if (this.selectAll) {
        this.checkedItems = [1, 2, 3];
      } else {
        this.checkedItems = [];
      }
    },
    checkAllItems: function() {
      this.checkedItems = [1, 2, 3];
      this.selectAll = true;
    },
    uncheckAllItems: function() {
      this.checkedItems = [];
      this.selectAll = false;
    },
    invertSelection: function() {
      var self = this;
      var uncheckedItems = this.checkedItems.filter(function(item) {
        return !self.checkedItems.includes(item);
      });
      this.checkedItems = uncheckedItems.concat([1, 2, 3].filter(function(item) {
        return !uncheckedItems.includes(item);
      }));
    }
  }
})

在这个示例中，我们使用`v-model`指令来绑定多选框的选中状态，并使用`@change`事件来监听全选框的状态变化。`selectAllCheck`方法会在全选框的状态变化时被调用，根据全选框的状态更新选中的多选框。

我们还定义了三个方法：`checkAllItems`、`uncheckAllItems`和`invertSelection`，分别用于全选、全不选和反选多选框。在`checkAllItems`方法中，我们将所有多选框都选中，并将全选框的状态设置为`true`。在`uncheckAllItems`方法中，我们将所有多选框都不选中，并将全选框的状态设置为`false`。在`invertSelection`方法中，我们将未选中的多选框选中，已选中的多选框取消选中。