| 网站首页 | 业界新闻 | 群组 | 交易 | 人才 | 下载频道 | 博客 | 代码贴 | 编程论坛
免费IT实战开发视频教程合集分享千里之行 始于足下
共有 117 人关注过本帖
标题:设计一个有多组复选框checkbox 的页面,单击“复选框”按钮,输出页面中所有 ...
只看楼主 加入收藏
li71
Rank: 1
等 级:新手上路
帖 子:21
专家分:0
注 册:2018-9-8
结帖率:100%
  已结贴   问题点数:20  回复次数:3   
设计一个有多组复选框checkbox 的页面,单击“复选框”按钮,输出页面中所有的被选中的checkbox的值和提示文字
求大佬解答 急  
2018-11-03 16:58
林月儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:湖南
等 级:版主
威 望:101
帖 子:1664
专家分:7215
注 册:2015-3-19
  得分:10 
对复选框绑定点击事件,然后在函数体获取选中状态。可以查一下js的dom操作api

wechat    PrinceThumb
2018-11-06 00:18
icecool
Rank: 9Rank: 9Rank: 9
等 级:贵宾
威 望:18
帖 子:1153
专家分:1062
注 册:2005-3-14
  得分:10 
<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>

loading...
http://www.000332.net
2018-11-06 16:48
icecool
Rank: 9Rank: 9Rank: 9
等 级:贵宾
威 望:18
帖 子:1153
专家分:1062
注 册:2005-3-14
  得分:0 
要弹出提示改为下面这里:
程序代码:

<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>

loading...
http://www.000332.net
2018-11-06 16:59







关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.020409 second(s), 8 queries.
Copyright©2004-2018, BCCN.NET, All Rights Reserved