一:通过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); }
演示:
二: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>
演示:
三:vue页面,通过watch监控所被选中的选项,
{{item.text}}
export default { name:'checkbox', data(){ return { checkedValue:[],//一定必须是数组不能是字符串 answer:[], } }, watch:{ checkedValue:function(new_v,old_v){ this.answer=this.checkedValue; } }, }