js checkbox 控制div展示

可以通过以下步骤实现：

1. 给 checkbox 添加一个 onchange 事件监听器
2. 在事件处理函数中，获取 checkbox 的状态（选中/未选中）
3. 根据 checkbox 的状态，控制 div 的展示/隐藏

示例代码如下：

HTML:

<input type="checkbox" id="checkbox"> 显示/隐藏 div
<div id="myDiv">这是一个 div</div>

JavaScript:

const checkbox = document.getElementById('checkbox');
const myDiv = document.getElementById('myDiv');

checkbox.onchange = function () {
  if (checkbox.checked) {
    // 如果 checkbox 被选中，则显示 div
    myDiv.style.display = 'block';
  } else {
    // 如果 checkbox 没有被选中，则隐藏 div
    myDiv.style.display = 'none';
  }
}

当用户点击 checkbox 时，会触发 onchange 事件处理函数，根据 checkbox 的状态来控制 div 的展示/隐藏。

相关问题

vue点击checkbox显示隐藏div

在Vue中，你可以通过双向绑定和v-show指令轻松地实现点击checkbox显示或隐藏div的功能。下面是一个简单的例子：

HTML部分:

<input type="checkbox" v-model="showDiv">
<label for="checkbox">点击显示/隐藏</label>
<div v-show="showDiv" id="hidden-div">这是一段隐藏的内容</div>

在这个例子中，`v-model`绑定了checkbox的状态（true表示选中，false表示未选中），当checkbox被勾选（即`showDiv`变为true）时，相应的div会因为`v-show`指令而展示；反之，如果取消勾选（`showDiv`变回false），div就会隐藏。

JavaScript部分（假设你在某个Vue组件里）：

export default {
  data() {
    return {
      showDiv: false, // 初始时，div默认隐藏
    };
  },
};

当你需要在其他地方控制这个div的显示，可以直接修改`showDiv`的值。

vue 利用checkbox控制按钮显示和隐藏

在Vue.js中，你可以利用复选框（checkbox）通过绑定`v-model`指令来控制按钮的显示和隐藏。以下是简单的步骤：

1. 首先，在HTML中，创建一个复选框和一个按钮：

<template>
  <div>
    <input type="checkbox" v-model="showButton">
    <button v-if="showButton">点击我</button>
  </div>
</template>

这里，`v-model`将复选框的状态绑定到Vue实例的数据属性`showButton`。

2. 在你的Vue组件的script部分，设置`data()`函数来初始化这个数据属性：

<script>
export default {
  data() {
    return {
      showButton: false, // 初始状态为隐藏
    };
  },
};
</script>

当复选框被勾选时，`showButton`变为`true`，`v-if`条件会匹配，按钮就会显示；反之，如果复选框未勾选，则按钮会被隐藏。