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

如果 checkbox 是动态生成的，可以通过以下方式来判断它是否被选中：

var checkbox = document.querySelector('input[type="checkbox"]:checked');
if (checkbox) {
  // checkbox 被选中
} else {
  // checkbox 未被选中
}

这里使用了 `querySelector` 方法来查找被选中的 checkbox。`:checked` 选择器表示选中状态，`input[type="checkbox"]` 匹配所有的 checkbox。如果存在被选中的 checkbox，`querySelector` 就会返回它，否则返回 `null`。在 if 语句中，可以判断 `checkbox` 是否为真值来确定 checkbox 是否被选中。

相关问题

判断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);

el-checkbox-group el-checkbox 使用vue和element-ui，写两组el-checkbox-group ，每组都用v-for el-checkbox假数据，分别是随机生成水果和蔬菜的，且蔬菜是默认禁用的，选中水果中的苹果，才取消禁用，选中别的水果继续保持蔬菜禁用，请用具体代码实现

好的，以下是具体代码实现：

<template>
  <div>
    <h3>水果</h3>
    <el-checkbox-group v-model="fruitSelection">
      <el-checkbox v-for="fruit in fruits" :key="fruit" :label="fruit" @change="handleFruitChange"></el-checkbox>
    </el-checkbox-group>
    <h3>蔬菜</h3>
    <el-checkbox-group v-model="vegetableSelection">
      <el-checkbox v-for="vegetable in vegetables" :key="vegetable" :label="vegetable" :disabled="vegetableDisabled"></el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['苹果', '香蕉', '橙子', '草莓'],
      vegetables: ['白菜', '胡萝卜', '西红柿', '黄瓜'],
      fruitSelection: [],
      vegetableSelection: [],
      vegetableDisabled: true
    };
  },
  methods: {
    handleFruitChange(checkedFruits) {
      if (checkedFruits.includes('苹果')) {
        this.vegetableDisabled = false;
      } else {
        this.vegetableSelection = [];
        this.vegetableDisabled = true;
      }
    }
  }
}
</script>

以上代码中，我们先定义了两个数组 `fruits` 和 `vegetables` 分别代表水果和蔬菜的可选项。然后又定义了 `fruitSelection` 和 `vegetableSelection` 分别代表水果和蔬菜的选中项，`vegetableDisabled` 代表蔬菜是否禁用。

在模板中，我们使用 `el-checkbox-group` 和 `v-for` 分别渲染出水果和蔬菜的可选项，其中蔬菜的 `el-checkbox` 组件的 `:disabled` 属性绑定了 `vegetableDisabled` 变量，表示当 `vegetableDisabled` 为 `true` 时，蔬菜不可选。

在 `handleFruitChange` 方法中，我们监听水果的选中项变化事件 `@change`，当选中项中包含苹果时，我们将 `vegetableDisabled` 变量设为 `false` 表示蔬菜可以选择，否则将 `vegetableSelection` 清空并将 `vegetableDisabled` 设为 `true` 表示蔬菜不可选。