再在div窗体上添加多选框

要在 div 窗体上添加多选框，可以使用以下 HTML 代码：

<div>
  <label><input type="checkbox" name="option1" value="Option 1"> Option 1</label>
  <br>
  <label><input type="checkbox" name="option2" value="Option 2"> Option 2</label>
  <br>
  <label><input type="checkbox" name="option3" value="Option 3"> Option 3</label>
</div>

这段代码会在 div 窗体中添加三个多选框，每个多选框都有一个标签，可以通过标签文字来描述多选框选项。你可以根据实际需求修改多选框的名称、值和标签文字。

相关问题

elementUI的this.$confirm添加多选框

elementUI的this.$confirm方法不支持直接添加多选框。根据提供的代码和引用中的示例，可以看到在确认对话框的内容部分，使用了h函数创建了一组p标签，但是并没有提供多选框的选项。引用中的示例也没有展示如何在确认对话框中添加多选框。

如果您需要在elementUI的确认对话框中添加多选框，您可以考虑自定义对话框组件，然后使用elementUI的Dialog组件来实现。在自定义对话框组件中，您可以根据需要添加多选框，并在确认按钮点击时获取多选框的选项值进行处理。

以下是一个示例代码，展示如何自定义对话框组件并添加多选框:

<template>
  <el-dialog :visible.sync="dialogVisible" title="提示" @close="handleClose">
    <div>
      <el-checkbox-group v-model="checkedOptions">
        <el-checkbox label="选项1"></el-checkbox>
        <el-checkbox label="选项2"></el-checkbox>
        <el-checkbox label="选项3"></el-checkbox>
      </el-checkbox-group>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      checkedOptions: []
    };
  },
  methods: {
    handleClose() {
      // 对话框关闭时的逻辑
    },
    cancel() {
      // 取消按钮点击时的逻辑
      this.dialogVisible = false;
    },
    confirm() {
      // 确定按钮点击时的逻辑，处理多选框的选项值
      console.log(this.checkedOptions);
      this.dialogVisible = false;
    }
  }
};
</script>

通过自定义对话框组件，您可以根据需要自由地添加多选框以及其他表单元素，并在确认按钮点击时获取选项值进行处理。请根据您的实际需求进行修改和调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

html多选框div,用原生JS实现简单的多选框功能

好的，我可以帮你解决这个问题。以下是一种实现方法：

首先，在 HTML 中创建多选框的 div 元素，例如：

<div id="checkboxes">
  <input type="checkbox" value="option1" /> Option 1
  <input type="checkbox" value="option2" /> Option 2
  <input type="checkbox" value="option3" /> Option 3
</div>

然后，使用 JavaScript 代码获取多选框 div 元素和其中的所有复选框元素，以及为每个复选框元素添加点击事件监听器，以便在用户单击复选框时更新选中状态。代码如下：

var checkboxes = document.getElementById("checkboxes");
var checkboxInputs = checkboxes.getElementsByTagName("input");

for (var i = 0; i < checkboxInputs.length; i++) {
  var checkboxInput = checkboxInputs[i];
  checkboxInput.addEventListener("click", function() {
    updateCheckboxes();
  });
}

在事件监听器函数 updateCheckboxes() 中，可以获取选中的复选框值，并将它们存储在一个数组中。代码如下：

function updateCheckboxes() {
  var checkedValues = [];

  for (var i = 0; i < checkboxInputs.length; i++) {
    var checkboxInput = checkboxInputs[i];

    if (checkboxInput.checked) {
      checkedValues.push(checkboxInput.value);
    }
  }

  console.log(checkedValues);
}

最后，可以在控制台中查看选中的复选框值，也可以根据需要将它们用于其他操作。

完整的 HTML 和 JavaScript 代码如下：

<div id="checkboxes">
  <input type="checkbox" value="option1" /> Option 1
  <input type="checkbox" value="option2" /> Option 2
  <input type="checkbox" value="option3" /> Option 3
</div>

<script>
  var checkboxes = document.getElementById("checkboxes");
  var checkboxInputs = checkboxes.getElementsByTagName("input");

  for (var i = 0; i < checkboxInputs.length; i++) {
    var checkboxInput = checkboxInputs[i];
    checkboxInput.addEventListener("click", function() {
      updateCheckboxes();
    });
  }

  function updateCheckboxes() {
    var checkedValues = [];

    for (var i = 0; i < checkboxInputs.length; i++) {
      var checkboxInput = checkboxInputs[i];

      if (checkboxInput.checked) {
        checkedValues.push(checkboxInput.value);
      }
    }

    console.log(checkedValues);
  }
</script>