javascript - 关于复选框显示问题。
本文介绍了javascript - 关于复选框显示问题。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如何选择一个或者多个复选框的时候，数字显示在div中呢，思路比较乱，谢谢！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<input type="checkbox">123<br/>
<input type="checkbox">456<br/>
<input type="checkbox">789<br/>
<input type="checkbox">563<br/>
<input type="checkbox">156<br/>
<input type="checkbox">110<br/>
<div style="width:290px; height:50px; border:1px solid;">
</div>
</body>
</html>
解决方案
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<input type="checkbox" name="test" value="123">123
<br/>
<input type="checkbox" name="test" value="456">456
<br/>
<input type="checkbox" name="test" value="789">789
<br/>
<input type="checkbox" name="test" value="563">563
<br/>
<input type="checkbox" name="test" value="156">156
<br/>
<input type="checkbox" name="test" value="110">110
<br/>
<div style="width:290px; height:50px; border:1px solid;">
</div>
<script src="jquery.min.js"></script>
<script type="text/javascript">
//改这些复选框统一的name属性，比如name="test",加上对应的value值
$('input[name=test]').change(function() {
var arr = []
$('input[name=test]:checked').each(function(i, v) {
arr.push($(v).val())
})
$('div').html(arr.join(','))
})
</script>
</body>
</html>
这篇关于javascript - 关于复选框显示问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
