页面如何获取checkbox选中的多个值?

简介: 页面如何获取checkbox选中的多个值?

一:通过js获取

先定义一个CheckBox:


html:

<input type="checkbox" name="test" value="1"/><span>1</span>
<input type="checkbox" name="test" value="2"/><span>2</span>
<input type="checkbox" name="test" value="3"/><span>3</span>
<input type="checkbox" name="test" value="4"/><span>4</span>
<input type="checkbox" name="test" value="5"/><span>5</span>
<input type='button' value='提交' onclick="show()"/>


js:

function show(){
    obj = document.getElementsByName("test");
    check_val = [];
    for(k in obj){
        if(obj[k].checked)
            check_val.push(obj[k].value);
    }
    alert(check_val);
}


演示:

1·3.PNG


二:vue页面如何获取:

直接通过给每个选项添加一个v-model 双向绑定即可:

<div id="d5">
    <p>{{box5.toString()}}</p>
    <input type="checkbox" v-model="box5" value="red">
    <input type="checkbox" v-model="box5" value="黄">
    <input type="checkbox" v-model="box5" value="蓝">
</div>
<script>
    new Vue({
        el:'#d5',
        data:{
        box5:[]
    }
    })
</script>    


演示: 0·4.PNG



三:vue页面,通过watch监控所被选中的选项,

  {{item.text}}  




export default {
        name:'checkbox',
        data(){
            return {
                checkedValue:[],//一定必须是数组不能是字符串
                answer:[],
            }
        },
  watch:{
        checkedValue:function(new_v,old_v){
            this.answer=this.checkedValue;
        }
    },
}


目录
相关文章
|
7月前
|
JavaScript
Element_select 选择器 选中框中显示不了选中的值
解决Vue中`el-select`选择器不显示选中值的问题:在`selectChanged`方法中添加`this.$forceUpdate()`,强制组件更新,使输入框显示选择的值。示例代码包括模板和方法。
964 2
|
4月前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
116 0
|
5月前
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
67 1
|
7月前
el-cascader组件实现点击、递归勾选联动子集children所有选项被选中。
el-cascader组件实现点击、递归勾选联动子集children所有选项被选中。
|
前端开发
Bootstrap tab页签刷新加载不显示,只有点击其他标签后第一个才显示
Bootstrap tab页签刷新加载不显示,只有点击其他标签后第一个才显示
114 0
|
JavaScript
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
【Layui】对于列表页复选框只有选中时才会显示
【Layui】对于列表页复选框只有选中时才会显示
184 0
【Layui】对于列表页复选框只有选中时才会显示
【Layui】关于单选框的选中状态,下拉框默认显示
【Layui】关于单选框的选中状态,下拉框默认显示
656 0
【Layui】关于单选框的选中状态,下拉框默认显示
|
存储
PyQt5 技巧篇-复选框绑定行内容,全选、清空、展示选中的内容功能实现演示,设置复选框选中,检查复选框选中状态
PyQt5 技巧篇-复选框绑定行内容,全选、清空、展示选中的内容功能实现演示,设置复选框选中,检查复选框选中状态
484 0
PyQt5 技巧篇-复选框绑定行内容,全选、清空、展示选中的内容功能实现演示,设置复选框选中,检查复选框选中状态