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


目录
相关文章
|
存储 SQL 运维
ISCSI详解(一)——存储基本知识
ISCSI详解(一)——存储基本知识
710 1
|
JavaScript 前端开发
JS中oninput和onchange事件的区别
JS中oninput和onchange事件的区别
|
存储 编解码 算法
OpenCV2 计算机视觉应用编程秘籍:6~10
OpenCV2 计算机视觉应用编程秘籍:6~10
184 0
|
前端开发 程序员
Mac电脑:安装cnpm(补充步骤)
在前端开发初期,对于新入行的新手来说,掌握和使用cnpm是必不可少的过程,安装cnpm可以加快安装软件的速度,想要使用cnpm,首先要知道安装步骤,以及解决安装使用的时候遇到的一些问题。本篇博文对之前的npm安装步骤流程做一个补充,大牛可以忽略此篇文章,分享给有需要的人,具体的内容如下所示。
2565 0
Mac电脑:安装cnpm(补充步骤)
|
10月前
|
数据可视化 JavaScript 前端开发
数据可视化进阶:D3.js在复杂数据可视化中的应用
【10月更文挑战第26天】数据可视化是将数据以图形、图表等形式呈现的过程,帮助我们理解数据和揭示趋势。D3.js(Data-Driven Documents)是一个基于JavaScript的库,使用HTML、SVG和CSS创建动态、交互式的数据可视化。它通过数据驱动文档的方式,将数据与DOM元素关联,提供高度的灵活性和定制性,适用于复杂数据的可视化任务。 示例代码展示了如何使用D3.js创建一个简单的柱状图,展示了其基本用法。D3.js的链式调用和回调函数机制使代码简洁易懂,支持复杂的布局和交互逻辑。
355 3
|
11月前
|
JavaScript 前端开发 编译器
将 CommonJS 模块转换为 ES6 模块
【10月更文挑战第11天】 将 CommonJS 模块转换为 ES6 模块有三种主要方法:手动修改代码、使用工具(如 Babel)自动转换和逐步迁移。手动修改涉及导出和导入方式的转换,确保名称和结构一致;使用工具可自动化这一过程;逐步迁移适用于大型项目,先在新模块中使用 ES6 语法,再逐步替换旧模块。转换过程中需注意兼容性、代码逻辑调整和充分测试。
672 58
|
11月前
|
前端开发 JavaScript
判断数组为空的方法有哪些?
本文介绍了多种判断数组是否为空的方法,包括使用 `length` 属性、隐式类型转换、`toString()`、`join()`、`every()`、`reduce()`、`filter()`、`some()` 方法以及循环。每种方法都有其适用场景,其中使用 `length` 属性和隐式类型转换最为常见和简单。文章首发于微信公众号“前端徐徐”。
778 2
判断数组为空的方法有哪些?
|
存储 人工智能 Java
如何用Java找出两个List中的重复元素,读这一篇就够了
在Java编程中,我们经常需要找出两个列表(List)中的重复元素。在本文中,我们将探讨三种方法来实现这一目标。
|
11月前
|
应用服务中间件 Shell PHP
thinkphp 设置运行目录为/public后 404错误
thinkphp 设置运行目录为/public后 404错误
|
JavaScript 前端开发
详细解读checkbox的全选与反选
详细解读checkbox的全选与反选
285 0