判断element中动态生成的多个checkbox是否被选中

可以通过以下步骤判断element中动态生成的多个checkbox是否被选中：

1. 获取所有的checkbox元素，可以使用 `document.getElementsByTagName('input')` 或者 `document.querySelectorAll('input[type="checkbox"]')` 等方法来获取所有的checkbox元素。

2. 遍历所有的checkbox元素，判断每个checkbox是否被选中。可以通过 `element.checked` 属性来判断一个checkbox是否被选中，如果该属性的值为true，则表示该checkbox被选中；否则，该checkbox未被选中。

3. 统计被选中的checkbox数量。在遍历每个checkbox元素的过程中，如果该元素被选中，则将计数器加1，最终得到被选中的checkbox数量。

下面是一个示例代码：

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var count = 0;
for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    count++;
  }
}
console.log('被选中的checkbox数量为：', count);

相关问题

element Checkbox 多个选项

如果需要在 element 中使用多个 Checkbox 选项，可以使用 `v-for` 指令进行渲染。以下是一个示例：

<template>
  <div>
    <el-checkbox-group v-model="checkedList">
      <el-checkbox v-for="item in options" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedList: [],
      options: [
        { label: '选项 1', value: 1 },
        { label: '选项 2', value: 2 },
        { label: '选项 3', value: 3 }
      ]
    };
  }
};
</script>

在上面的示例中，`el-checkbox-group` 组件绑定了一个数组 `checkedList`，用于存储被选中的选项的值。`v-for` 指令对 `options` 数组进行渲染，生成多个 Checkbox 选项。每个选项使用 `label` 属性进行标识。

在实际开发中，可以根据需求进行自定义配置，如添加全选、反选等功能。更多详细信息可以参考 Element 官方文档。

vue elementUI 写一个点击Checkbox 多选框生成tag标签

可以使用 ElementUI 的 Tag 组件来实现这个需求，具体实现方式如下：

1. 在页面中引入 ElementUI 和 Vue.js：

<!-- 引入 ElementUI 样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入 Vue.js 和 ElementUI -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 在 Vue.js 的模板中添加 Checkbox 和 Tag 组件：

<template>
  <div>
    <el-checkbox-group v-model="checkedList" @change="handleChange">
      <el-checkbox label="选项1"></el-checkbox>
      <el-checkbox label="选项2"></el-checkbox>
      <el-checkbox label="选项3"></el-checkbox>
    </el-checkbox-group>
    <el-tag v-for="(tag, index) in tags" :key="index">{{ tag }}</el-tag>
  </div>
</template>

3. 在 Vue.js 的 data 中定义 checkedList 和 tags 变量：

data() {
  return {
    checkedList: [], // 选中的多选框
    tags: [] // 生成的标签
  }
}

4. 在 Vue.js 的 methods 中添加 handleChange 函数，用于监听多选框的变化并生成对应的标签：

methods: {
  handleChange(checkedList) {
    this.tags = checkedList.map(label => {
      return {
        label: label,
        type: 'success'
      }
    })
  }
}

在 handleChange 函数中，首先将选中的多选框保存到 checkedList 变量中，然后通过 map 方法将 checkedList 中的每一个选项转换成一个包含 label 和 type 属性的对象，最后将转换后的对象保存到 tags 变量中。

5. 最后，将 Vue.js 实例挂载到页面中：

new Vue({
  el: '#app'
})

完整的代码如下：

<template>
  <div>
    <el-checkbox-group v-model="checkedList" @change="handleChange">
      <el-checkbox label="选项1"></el-checkbox>
      <el-checkbox label="选项2"></el-checkbox>
      <el-checkbox label="选项3"></el-checkbox>
    </el-checkbox-group>
    <el-tag v-for="(tag, index) in tags" :key="index">{{ tag.label }}</el-tag>
  </div>
</template>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      checkedList: [],
      tags: []
    }
  },
  methods: {
    handleChange(checkedList) {
      this.tags = checkedList.map(label => {
        return {
          label: label,
          type: 'success'
        }
      })
    }
  }
})
</script>

<style>
/* 可选的样式 */
.el-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>