多个复选框中选择2个后触发

<SCRIPT LANGUAGE="JavaScript">
function point(form){
var s = 0;
 for (var i=0; i<form.elements.length; i++){
 var e = form.elements[i];
  if (e.type == 'checkbox'){
   if(e.checked) s++;
  }
 }

 if(s == 2){
  alert('I submit ,U ok now? ');
  //form.submit();  递交当前this.form
  //document.aa.submit(); 递交指定name的form
  //两者方法不同,效果一样。
 }
}
</SCRIPT>

<form method="post" action="GetSubmit.asp" name="aa">
第1个<INPUT type=checkbox value='1' name='1' οnclick="point(this.form)"><br />
第2个<INPUT type=checkbox value='2' name='2' οnclick="point(this.form)"><br />
第3个<INPUT type=checkbox value='3' name='3' οnclick="point(this.form)"><br />
第4个<INPUT type=checkbox value='4' name='4' οnclick="point(this.form)"><br />
第5个<INPUT type=checkbox value='5' name='5' οnclick="point(this.form)"><br />
......
</form>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在 Element UI ,可以使用 `<el-checkbox-group>` 标签来实现多个复选框的组合。以下是一个简单的多选框示例: ```html <template> <el-checkbox-group v-model="checkedList"> <el-checkbox label="apple">苹果</el-checkbox> <el-checkbox label="banana">香蕉</el-checkbox> <el-checkbox label="orange">橙子</el-checkbox> </el-checkbox-group> </template> <script> export default { data() { return { checkedList: [] }; } }; </script> ``` 在这个示例,我们使用 `v-model` 指令来绑定选复选框到 `checkedList` 变量上。当复选框被选时,对应的 `label` 值将会被添加到 `checkedList` ;当复选框被取消选时,对应的 `label` 值将会从 `checkedList` 移除。 你还可以通过给 `<el-checkbox-group>` 标签设置 `min` 和 `max` 属性来限制可以选复选框数量。例如: ```html <template> <el-checkbox-group v-model="checkedList" :min="1" :max="2"> <el-checkbox label="apple">苹果</el-checkbox> <el-checkbox label="banana">香蕉</el-checkbox> <el-checkbox label="orange">橙子</el-checkbox> </el-checkbox-group> </template> <script> export default { data() { return { checkedList: [] }; } }; </script> ``` 在这个示例,我们设置了 `min` 属性为 `1`,`max` 属性为 `2`,表示用户必须选至少一个复选框,最多选两个复选框。 ### 回答2: Element UI 是一个基于 Vue.js 框架的前端UI组件库,它提供了一系列的组件来方便开发者构建现代化的界面。其,Element UI也提供了多个复选框组件来满足不同需求。 在使用 Element UI 的多个复选框时,首先需要在工程引入 Element UI 的库文件,并注册相应的组件。然后,可以在需要的地方使用`el-checkbox-group`组件来包裹一组复选框,并使用`el-checkbox`组件来定义每个复选框。 `el-checkbox-group`组件支持`v-model`指令来实现数据的双向绑定,可以通过`v-model`绑定一个变量,在变量保存复选框的选状态。复选框的值可以使用`label`属性来指定,当复选框被选时,`el-checkbox-group`组件会将选复选框的`label`值存储在绑定的变量。 此外,`el-checkbox-group`组件还可以通过设置`max`和`min`属性来限制最多和最少可选复选框数量。如果需要在选或取消选某个复选框时执行一些操作,可以使用`@change`事件来监听复选框的状态变化。 总之,Element UI 的多个复选框组件提供了丰富的功能和灵活的配置选项,可以满足不同场景下的需求,帮助开发者快速搭建直观友好的用户界面。同时,结合 Vue.js 的数据驱动特性,可以方便地操作和管理复选框的选状态。 ### 回答3: Element UI 是一个基于 Vue.js 的组件库,提供了丰富的 UI 组件,其包括多个复选框(checkbox)。多个复选框主要用于在多选的场景下,用户可以选择多个选项。 使用 Element UI 的多个复选框,首先需要在 Vue 组件引入相关的组件,并通过 `el-checkbox-group` 组件来包裹多个 `el-checkbox` 组件。代码示例如下: ```html <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> </div> </template> <script> export default { data() { return { checkedList: [] // 用于存储已选的选项 }; }, methods: { handleChange(checkedValues) { // 复选框状态改变时触发的回调函数 console.log("已选的选项:", checkedValues); } } }; </script> ``` 在上述代码,通过 `v-model` 绑定 `checkedList` 属性来实现多个复选框的选和取消选。同时,通过 `@change` 绑定 `handleChange` 方法来监听复选框状态的改变。当复选框的选状态改变时,会触发 `handleChange` 方法,可以通过控制台输出已选的选项。 以上就是使用 Element UI 多个复选框的基本用法。根据实际需求,还可以通过设置相关属性来自定义多个复选框的样式和行为。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值