1 考察知识点
- HTML DOM CheckBox属性
- CheckBox对象代表一个HTML表单中的中的一个选择框
- 知识点学习地址:http://www.w3school.com.cn/jsref/dom_obj_checkbox.asp
2 需求
- 当用户点击多个表单中的复选框时,获取用户点击的全部对象
代码 一 (原生)
<html>
<head>
<script type="text/javascript">
function createOrder(){
coffee=document.forms[0].coffee;
txt=""
for (i=0;i<coffee.length;++ i){
if (coffee[i].checked){
txt=txt + coffee[i].value + " "
}
}
document.getElementById("order").value="你选择的答案是： "+ JSON.stringify(txt);
}
</script>
</head>
<body>
<p>复选框</p>
<form>
<input type="checkbox" name="coffee" value="A">A<br />
<input type="checkbox" name="coffee" value="B">B<br />
<input type="checkbox" name="coffee" value="C">C<br />
<input type="checkbox" name="coffee" value="D">D<br />
<input type="button" onclick="createOrder()" value="确认并提交"><br /><br />
<input type="text" id="order" size="20">
</form>
</body
代码 二(vue)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>获取当前的数据</title>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
$(function(){
var vm = new Vue({
el:"#body",
data:{
task:[
{money:"40",id:"1"},
{money:"50",id:"2"},
{money:"60",id:"3"},
{money:"70",id:"4"}
],
},
methods:{
button:function(num){
console.log(num);
},
}
});
})
</script>
</head>
<body id="body">
<form>
<ul>
<li v-for="item in task" @click="button(item.money)">
<input type="checkbox" name="coffee" value="{{item.money }}">{{item.money}}
</li>
</ul>
<input type="button" onclick="createOrder()" value="确认提交">
<input type="text" id="order" size="50">
</form>
</body>
<script type="text/javascript">
function createOrder(){
coffee=document.forms[0].coffee;
txt=""
for (i=0;i<coffee.length;++ i){
if (coffee[i].checked){
txt=txt + coffee[i].value + " "
}
}
document.getElementById("order").value="数字分别是： " + JSON.stringify(txt);
//txt是当前选中的值,可以转换成json格式之后,提交到后台进行处理
}
</script>
</html>
