页面如何获取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;
        }
    },
}


目录
相关文章
|
8月前
|
JavaScript
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
JQuery 判断radio是否有选中,获取选中的值demo示例(整理)
【Layui】对于列表页复选框只有选中时才会显示
【Layui】对于列表页复选框只有选中时才会显示
148 0
【Layui】对于列表页复选框只有选中时才会显示
【Layui】关于单选框的选中状态,下拉框默认显示
【Layui】关于单选框的选中状态,下拉框默认显示
600 0
【Layui】关于单选框的选中状态,下拉框默认显示
|
存储
PyQt5 技巧篇-复选框绑定行内容,全选、清空、展示选中的内容功能实现演示,设置复选框选中,检查复选框选中状态
PyQt5 技巧篇-复选框绑定行内容,全选、清空、展示选中的内容功能实现演示,设置复选框选中,检查复选框选中状态
438 0
PyQt5 技巧篇-复选框绑定行内容,全选、清空、展示选中的内容功能实现演示,设置复选框选中,检查复选框选中状态
SAP Spartacus里,点击checkbox右边的span文本,不会触发checkbox勾选的原因
SAP Spartacus里,点击checkbox右边的span文本,不会触发checkbox勾选的原因
SAP Spartacus里,点击checkbox右边的span文本,不会触发checkbox勾选的原因
|
JSON 前端开发 JavaScript
关于checkbox自动选中
checkbox是比较常用的,无论是权限管理还是博客的文章的标签类型的勾选,或者是上下级部门及其公司,都会用的到的。 今天主要讲的是checkbox自动根据值选中。 可参考我之前的文章:checkbox选中并通过ajax传数组到后台接收 js代码: //截取URL参数 function GetRequest() { var fullURL = window.
1286 0
|
JavaScript
jquery操作radio单选按钮,实现取值,动态选中,动态删除的各种方法
  本文主要讲的是在jquery里操作表单radio单选按钮的各种方法,如获取选中的radio的值,动态选中指定的radio项等。 1.获取选中的radio单选按钮的值: var v=$(":radio[name='aijquery']:checked").
1566 0