注册 登录
编程论坛 → JavaScript论坛

设计一个有多组复选框checkbox 的页面，单击“复选框”按钮，输出页面中所有的被选中的checkbox的值和提示文字

li71 发布于 2018-11-03 16:58， 3233 次点击
求大佬解答 急  
3 回复
#2
林月儿2018-11-06 00:18
对复选框绑定点击事件，然后在函数体获取选中状态。可以查一下js的dom操作api
#3
icecool2018-11-06 16:48
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<style>
table{
border-collapse:collapse;
border: 1px solid #ffffff;
width: 100%;
        }
span{background:#ff00bb;cursor: pointer; }
td.left{ width:30%;background:#99dd33;}
td.right{ width:70%;background:#CCCC33;}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){

                      $("span").click(function(){
                                         $("#txt_div").html( "显示数据:<br>");
                                         $("input[name='chk']:checked").each(function() {
                                                        $("#txt_div").append($(this).val() + "<br>");
                                          });
                       });
});
</script>
</head>
<body>
<table>
<tr><td class="left">
<input name=chk type="checkbox" value="1">a1<br>
<input name=chk type="checkbox" value="2">a2<br>
<input name=chk type="checkbox" value="3">a3<br>
<input name=chk type="checkbox"value="4">a4<br>
<input name=chk type="checkbox" value="5">a5<br>
<input name=chk type="checkbox" value="6">a6<br>
<input name=chk type="checkbox" value="7">a7<br>
<input name=chk type="checkbox"value="8">a8<br>
<span id="span1">确定</span>
</td>

<td class="right">
<div id="txt_div">显示数据：<br></div>
</td><tr>
</table>
</body>
</html>
#4
icecool2018-11-06 16:59
要弹出提示改为下面这里:
程序代码：

<script src="jquery.js"></script>
<script>
$(document).ready(function(){
                      $("span").click(function(){
                                         var txt_str="已选内容为：";
                                         $("#txt_div").html( "显示数据:<br>");
                                         $("input[name='chk']:checked").each(function() {
                                                        $("#txt_div").append($(this).val() + "<br>");
                                          txt_str = txt_str + $(this).val() + ";";   //准备弹出内容
                                          });
                          alert(txt_str);//这里弹出提示
                       });
});
</script>
1
©2025, BC-CN.NET
电脑版