复选框，每行只能单选，选择完以后计算

恶魔的幻影 2014-02-19 08:36:05
每行的复选框只能单选,最后合计出来分数~
现在的代码是，下面这样的，但是这个代码计算的已经能用了，单选的不能设置单行只能设置所以的复选框，请大家帮忙修改下，checkbox 的 name 最好不用一个名称就可以的那种！
<input type="checkbox" name="check" value="15" onclick="Math_Click()"


<script type="text/javascript">

      function chooseOne(cb) {   

          //先取得Div元素   

          //var obj = document.getElementById("mydiv"); 

		    var obj=document.getElementsByName("check");  

          ///判斷obj中的子元素i是否為cb，若否則表示未被點選   

          for (i=0; i<obj.children.length; i++){   

              if (obj.children[i]!=cb)    obj.children[i].checked = false;   

              //若是 但原先未被勾選 則變成勾選；反之 則變為未勾選   

              else    obj.children[i].checked = cb.checked;   

              //若要至少勾選一個的話，則把上面那行else拿掉，換用下面那行   

              //else obj.children[i].checked = true;   

          }   

      }   



        function Math_Click(){

           var rusult=0;

           var check_array=document.getElementsByName("check");

           for(var i=0;i<check_array.length;i++)

           {

               if(check_array[i].checked==true)

               {         

                  rusult=parseInt(rusult)+parseInt(check_array[i].value);

               }

           }

           	sum01.innerHTML =rusult; 

        }

</script>

...全文
348 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
迷茫的小阿明 2015-11-16
  • 打赏
  • 举报
 回复
window.onload=function(){ var x = document.getElementById('x1'); var x2 = document.getElementById('x2'); x.onclick=function(){ if($(this).is(':checked')){ $(this).attr('checked',true).siblings().attr('checked',false); }else{ $(this).attr('checked',false).siblings().attr('checked',false); } } x2.onclick=function(){ if($(this).is(':checked')){ }else{ $(this).attr('checked',false).siblings().attr('checked',false); } }
嘻哈大咖秀 2014-02-20
  • 打赏
  • 举报
 回复
引用 16 楼 aqiang566971 的回复:
还有一行的是知道方式如： 路 过 朋友介绍 家在附近 广告 这种不需要计算的但是也是单选 怎么办呢
单独写在一个div里面不加onclick事件
恶魔的幻影 2014-02-20
  • 打赏
  • 举报
 回复
引用 14 楼 microlab2009 的回复:
function chooseOne(thisObj){
			//查看对某一评价是否唯一
			var score = parseInt($("#score").html());
			var thisScore = parseInt($(thisObj).val());

			if($(thisObj).siblings(':checked').length >= 1){//如果同一评价存在多个选择
				var other = $(thisObj).siblings(':checked');
				var otherScore = parseInt($(other).val());
				score = score - otherScore;
				$(other).attr('checked','');
				score = parseInt(score+thisScore);
			}else{
				
				if($(thisObj).attr('checked')){
					score = parseInt(score+thisScore);
				}else{
					score = parseInt(score-thisScore);//取消减掉分数
				}
				
			}
			$("#score").html(score);
		}
还有一行的是知道方式如： 路 过 朋友介绍 家在附近 广告 这种不需要计算的但是也是单选 怎么办呢
嘻哈大咖秀 2014-02-19
  • 打赏
  • 举报
 回复 
<html>
<head>
	<script type="text/javascript" src='jquery-1.4.2.min.js'></script>
</head>
<body>
	<script type="text/javascript">
		$(document).ready(function(){

		});
		function chooseOne(thisObj,name){
			//查看对某一评价是否唯一
			var score = parseInt($("#score").html());
			var thisScore = parseInt($(thisObj).val());

			if($(":checkbox[name='"+name+"']:checked").length >1){//如果同一评价存在多个选择
				var other = $(thisObj).siblings(':checked');
				var otherScore = parseInt($(other).val());
				score = score - otherScore;
				$(other).attr('checked','');
				score = parseInt(score+thisScore);
			}else{
				score = parseInt(score+thisScore);
			}
			$("#score").html(score);
		}
	</script>
	<div>Q1、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="td" value="4" onclick="chooseOne(this,'td')" /> 满意 <input type="checkbox" name="td" value="3" onclick="chooseOne(this,'td')"/> 一般 <input type="checkbox" name="td" value="2" onclick="chooseOne(this,'td')"/> 不满意 <input type="checkbox" name="td" value="1" onclick="chooseOne(this,'td')"/></div>
	<div>Q2、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="cd" value="4" onclick="chooseOne(this,'cd')"/> 满意 <input type="checkbox" name="cd" value="3" onclick="chooseOne(this,'cd')"/> 一般 <input type="checkbox" name="cd" value="2" onclick="chooseOne(this,'cd')"/> 不满意 <input type="checkbox" name="cd" value="1" onclick="chooseOne(this,'cd')"/></div>
	<div>Q3、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="ld" value="4" onclick="chooseOne(this,'ld')"/> 满意 <input type="checkbox" name="ld" value="3" onclick="chooseOne(this,'ld')"/> 一般 <input type="checkbox" name="ld" value="2" onclick="chooseOne(this,'ld')"/> 不满意 <input type="checkbox" name="ld" value="1" onclick="chooseOne(this,'ld')"/></div>
	<div>Q4、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="md" value="4" onclick="chooseOne(this,'md')"/> 满意 <input type="checkbox" name="md" value="3" onclick="chooseOne(this,'md')"/> 一般 <input type="checkbox" name="md" value="2" onclick="chooseOne(this,'md')"/> 不满意 <input type="checkbox" name="md" value="1" onclick="chooseOne(this,'md')"/></div>
	<div>Q5、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="nd" value="4" onclick="chooseOne(this,'nd')"/> 满意 <input type="checkbox" name="nd" value="3" onclick="chooseOne(this,'nd')"/> 一般 <input type="checkbox" name="nd" value="2" onclick="chooseOne(this,'nd')"/> 不满意 <input type="checkbox" name="nd" value="1" onclick="chooseOne(this,'nd')"/></div>
	<div>本卷得分：<span id='score'>0</span></div>
</body>
</html>
泡泡鱼_ 2014-02-19
  • 打赏
  • 举报
 回复
借用下楼上朋友的dom结构 
<html> 
<head> 
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript">
        //每行只能选中一个；当有一个每选中后，将保证该行至少被选中一个；统计分数 
        function setScore(ev){
            ev              = ev || window.event;
            var target      = ev.srcElement || ev.target,//获取当前被点击项
                siblings    = target.parentNode.getElementsByTagName('input'),//根据当前被点击项，获取其所对应的行中所有的选项
                i           = 0,
                j           = siblings.length
                scoreCounts = parseInt(document.getElementById('score').innerHTML),//获取当前总分数
                val         = 0,
                makeOne     = !1;//额外的：保证每行必须选中一个，不需要时去除
            for(;i<j;i++){//遍历被点击项所对应的行中所有的选项
                val =   parseInt(siblings[i].value);
                if(siblings[i] == target){
                    /*
                        为当前被点击项时
                        1：如果当前选项选中了，加分
                        2：如果当前选项取消了，扣分
                    */
                    scoreCounts += siblings[i].checked ? val :-val;
                    
                    //额外的：保证每行必须选中一个，不需要时去除
                    makeOne = siblings[i].checked;
                }else if(siblings[i].checked){
                    /*
                        不是当前被点击项时，且被选中的项
                        1：一律扣分
                        2：取消其选中状态
                    */
                    scoreCounts -= val;
                    siblings[i].checked = !1;
                    //额外的：保证每行必须选中一个，不需要时去除
                    makeOne = !0;
                }
            };
            //额外的：保证每行必须选中一个，不需要时去除
            if(!makeOne){
                return !1;
            };
            document.getElementById('score').innerHTML = scoreCounts;
        };
        //初始化
        function initEvents(){
            /*
                这里checkList是以下面的结构为例，直接从document获取
                如果被包含在某个div[id=test]中，可以使用：
                var checkList = document.getElementById('test').getElementsByTagName('input')去获取
            */
            var checkList = document.getElementsByTagName('input'),
                i         = 0,
                j         = checkList.length;
            for(;i<j;i++){
                checkList[i].onclick = setScore;//设定事件
            };
        };
        window.onload=function(){
            initEvents();
        }
    </script>
</head> 
<body> 
    <div>Q1、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="a1" value="4"/> 满意 <input type="checkbox" name="b1" value="3"/> 一般 <input type="checkbox" name="c1" value="2"/> 不满意 <input type="checkbox" name="d1" value="1"/></div> 
    <div>Q2、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="a2" value="4"/> 满意 <input type="checkbox" name="b2" value="3"/> 一般 <input type="checkbox" name="c2" value="2"/> 不满意 <input type="checkbox" name="d2" value="1"/></div> 
    <div>Q3、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="a3" value="4"/> 满意 <input type="checkbox" name="b3" value="3"/> 一般 <input type="checkbox" name="c3" value="2"/> 不满意 <input type="checkbox" name="d3" value="1"/></div> 
    <div>Q4、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="a4" value="4"/> 满意 <input type="checkbox" name="b4" value="3"/> 一般 <input type="checkbox" name="c4" value="2"/> 不满意 <input type="checkbox" name="d4" value="1"/></div> 
    <div>Q5、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="a5" value="4"/> 满意 <input type="checkbox" name="b5" value="3"/> 一般 <input type="checkbox" name="c5" value="2"/> 不满意 <input type="checkbox" name="d5" value="1"/></div> 
    <div>本卷得分：<span id='score'>0</span></div> 
</body> 
</html>
恶魔的幻影 2014-02-19
  • 打赏
  • 举报
 回复
能不能给写个例子，或者帮我修改一下代码！
hch126163 2014-02-19
  • 打赏
  • 举报
 回复
方案1：用单选 方案1：用每一行的对象去获取 checkbox 列表，来做限制
似梦飞花 2014-02-19
  • 打赏
  • 举报
 回复
改成单选不行吗 每行的单选的name一致 或者建一个二维数组 没行的单选放在一个数组里判断试试
嘻哈大咖秀 2014-02-19
  • 打赏
  • 举报
 回复 
function chooseOne(thisObj){
			//查看对某一评价是否唯一
			var score = parseInt($("#score").html());
			var thisScore = parseInt($(thisObj).val());

			if($(thisObj).siblings(':checked').length >= 1){//如果同一评价存在多个选择
				var other = $(thisObj).siblings(':checked');
				var otherScore = parseInt($(other).val());
				score = score - otherScore;
				$(other).attr('checked','');
				score = parseInt(score+thisScore);
			}else{
				
				if($(thisObj).attr('checked')){
					score = parseInt(score+thisScore);
				}else{
					score = parseInt(score-thisScore);//取消减掉分数
				}
				
			}
			$("#score").html(score);
		}
嘻哈大咖秀 2014-02-19
  • 打赏
  • 举报
 回复
引用 12 楼 aqiang566971 的回复:
[quote=引用 11 楼 microlab2009 的回复:] [quote=引用 9 楼 aqiang566971 的回复:] 有没有办法使复选框 的name 名称不同也可以呢！
上面的代码可以用不同的复选框 的name 名称[/quote] 选中的时候 分数增加了 但是取消选中的时候 分数又加了一遍[/quote] 哦 取消的忘记判断了 你自己加下呗
恶魔的幻影 2014-02-19
  • 打赏
  • 举报
 回复
引用 11 楼 microlab2009 的回复:
[quote=引用 9 楼 aqiang566971 的回复:] 有没有办法使复选框 的name 名称不同也可以呢！
上面的代码可以用不同的复选框 的name 名称[/quote] 选中的时候 分数增加了 但是取消选中的时候 分数又加了一遍
嘻哈大咖秀 2014-02-19
  • 打赏
  • 举报
 回复
引用 9 楼 aqiang566971 的回复:
有没有办法使复选框 的name 名称不同也可以呢！
上面的代码可以用不同的复选框 的name 名称
嘻哈大咖秀 2014-02-19
  • 打赏
  • 举报
 回复 
<html>
<head>
	<script type="text/javascript" src='jquery-1.4.2.min.js'></script>
</head>
<body>
	<script type="text/javascript">
		$(document).ready(function(){

		});
		function chooseOne(thisObj){
			//查看对某一评价是否唯一
			var score = parseInt($("#score").html());
			var thisScore = parseInt($(thisObj).val());

			if($(thisObj).siblings(':checked').length >= 1){//如果同一评价存在多个选择
				var other = $(thisObj).siblings(':checked');
				var otherScore = parseInt($(other).val());
				score = score - otherScore;
				$(other).attr('checked','');
				score = parseInt(score+thisScore);
			}else{
				score = parseInt(score+thisScore);
			}
			$("#score").html(score);
		}
	</script>
	<div>Q1、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="td" value="4" onclick="chooseOne(this,'td')" /> 满意 <input type="checkbox" name="td" value="3" onclick="chooseOne(this,'td')"/> 一般 <input type="checkbox" name="td" value="2" onclick="chooseOne(this,'td')"/> 不满意 <input type="checkbox" name="td" value="1" onclick="chooseOne(this,'td')"/></div>
	<div>Q2、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="cd" value="4" onclick="chooseOne(this,'cd')"/> 满意 <input type="checkbox" name="cd" value="3" onclick="chooseOne(this,'cd')"/> 一般 <input type="checkbox" name="cd" value="2" onclick="chooseOne(this,'cd')"/> 不满意 <input type="checkbox" name="cd" value="1" onclick="chooseOne(this,'cd')"/></div>
	<div>Q3、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="ld" value="4" onclick="chooseOne(this,'ld')"/> 满意 <input type="checkbox" name="ld" value="3" onclick="chooseOne(this,'ld')"/> 一般 <input type="checkbox" name="ld" value="2" onclick="chooseOne(this,'ld')"/> 不满意 <input type="checkbox" name="ld" value="1" onclick="chooseOne(this,'ld')"/></div>
	<div>Q4、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="md" value="4" onclick="chooseOne(this,'md')"/> 满意 <input type="checkbox" name="md" value="3" onclick="chooseOne(this,'md')"/> 一般 <input type="checkbox" name="md" value="2" onclick="chooseOne(this,'md')"/> 不满意 <input type="checkbox" name="md" value="1" onclick="chooseOne(this,'md')"/></div>
	<div>Q5、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="nd" value="4" onclick="chooseOne(this,'nd')"/> 满意 <input type="checkbox" name="nd" value="3" onclick="chooseOne(this,'nd')"/> 一般 <input type="checkbox" name="nd" value="2" onclick="chooseOne(this,'nd')"/> 不满意 <input type="checkbox" name="nd" value="1" onclick="chooseOne(this,'nd')"/></div>
	<div>本卷得分：<span id='score'>0</span></div>
</body>
</html>
代码都是现成的 自己看看改改就行了啊
恶魔的幻影 2014-02-19
  • 打赏
  • 举报
 回复
引用 7 楼 microlab2009 的回复:
[quote=引用 6 楼 aqiang566971 的回复:] 这个的计算好使，但是单选不好使！
单选没问题的啊 我测试过了[/quote] 有没有办法使复选框 的name 名称不同也可以呢！
坐口之蛙 2014-02-19
  • 打赏
  • 举报
 回复
1、引用jquery库 2、 <script type="text/javascript"> $(function(){ $(":checkbox").click(function(){ $(":checkbox[name='" + $(this).attr("name") + "']").not(this).attr("checked",false); var score = 0; $(":checkbox:checked").each(function(){ score += parseInt($(this).val()); }); $("#sum01").html(score ); }); }); </script>
嘻哈大咖秀 2014-02-19
  • 打赏
  • 举报
 回复
引用 6 楼 aqiang566971 的回复:
这个的计算好使，但是单选不好使！
单选没问题的啊 我测试过了
恶魔的幻影 2014-02-19
  • 打赏
  • 举报
 回复
引用 4 楼 microlab2009 的回复:
<html>
<head>
	<script type="text/javascript" src='jquery-1.4.2.min.js'></script>
</head>
<body>
	<script type="text/javascript">
		$(document).ready(function(){

		});
		function chooseOne(thisObj,name){
			//查看对某一评价是否唯一
			var score = parseInt($("#score").html());
			var thisScore = parseInt($(thisObj).val());

			if($(":checkbox[name='"+name+"']:checked").length >1){//如果同一评价存在多个选择
				var other = $(thisObj).siblings(':checked');
				var otherScore = parseInt($(other).val());
				score = score - otherScore;
				$(other).attr('checked','');
				score = parseInt(score+thisScore);
			}else{
				score = parseInt(score+thisScore);
			}
			$("#score").html(score);
		}
	</script>
	<div>Q1、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="td" value="4" onclick="chooseOne(this,'td')" /> 满意 <input type="checkbox" name="td" value="3" onclick="chooseOne(this,'td')"/> 一般 <input type="checkbox" name="td" value="2" onclick="chooseOne(this,'td')"/> 不满意 <input type="checkbox" name="td" value="1" onclick="chooseOne(this,'td')"/></div>
	<div>Q2、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="cd" value="4" onclick="chooseOne(this,'cd')"/> 满意 <input type="checkbox" name="cd" value="3" onclick="chooseOne(this,'cd')"/> 一般 <input type="checkbox" name="cd" value="2" onclick="chooseOne(this,'cd')"/> 不满意 <input type="checkbox" name="cd" value="1" onclick="chooseOne(this,'cd')"/></div>
	<div>Q3、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="ld" value="4" onclick="chooseOne(this,'ld')"/> 满意 <input type="checkbox" name="ld" value="3" onclick="chooseOne(this,'ld')"/> 一般 <input type="checkbox" name="ld" value="2" onclick="chooseOne(this,'ld')"/> 不满意 <input type="checkbox" name="ld" value="1" onclick="chooseOne(this,'ld')"/></div>
	<div>Q4、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="md" value="4" onclick="chooseOne(this,'md')"/> 满意 <input type="checkbox" name="md" value="3" onclick="chooseOne(this,'md')"/> 一般 <input type="checkbox" name="md" value="2" onclick="chooseOne(this,'md')"/> 不满意 <input type="checkbox" name="md" value="1" onclick="chooseOne(this,'md')"/></div>
	<div>Q5、您对工作人员的服务态度评价是：很满意 <input type="checkbox" name="nd" value="4" onclick="chooseOne(this,'nd')"/> 满意 <input type="checkbox" name="nd" value="3" onclick="chooseOne(this,'nd')"/> 一般 <input type="checkbox" name="nd" value="2" onclick="chooseOne(this,'nd')"/> 不满意 <input type="checkbox" name="nd" value="1" onclick="chooseOne(this,'nd')"/></div>
	<div>本卷得分：<span id='score'>0</span></div>
</body>
</html>
这个的计算好使，但是单选不好使！
泡泡鱼_ 2014-02-19
  • 打赏
  • 举报
 回复
引用 2 楼 hch126163 的回复:
方案1：用单选 方案1：用每一行的对象去获取 checkbox 列表，来做限制
如果你就是不用单选,那么每个复选框的click事件中加多个业务逻辑[点击哪一个,就将被选中的同级的兄弟元素的选中状态取消]. 假设像我楼上那样的结构,每个复选框的父元素就是div,那遍历:当前点击对象.parentNode.getElementsByTagName('input')它,去实现取消被选中的兄弟元素.这应该是比较容易的吧
angular单选按钮_使用AngularJS处理单选框和复选框的简单方法
AngularJS对表单的处理...这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法。创建Angular表单在这篇文章里，我们需要两个文件:index.html和app.js。app.js用来保存所有的Angula...
python单选按钮和复选框的区别_自动化测试基础篇--Selenium单选框（Radio）复选框（CheckBox）...
二、单选框：radio三、复选框：checkbox四、判断是否勾选：is_selected()1.有时候这个选项框，本身就是选中状态，如果我再点击一下，它就反选了，这可不是我期望的结果，那么可不可以当它是没选中的时候，我去点击下...
Java学习day078 Swing用户界面组件（四：选择组件）（复选框、单选钮、边框、组合框、滑动条）
使用的教材是java核心技术卷1，我将跟着这本书的章节同时配合视频资源来进行学习基础java知识。 day078 Swing用户界面组件（四：选择组件）（复选框、单选钮、边框、组合框、滑动条） ...
vue用复选框实现组件，支持单选和多选操作
只通过一个组件实现单选和多选混合
自定义实现复选框
项目中需要用到复选框，而QComboBox只能实现单选操作。即使是加以改造可以多选，也只能一次选择一个选项，不符合项目需求。于是就花了两天时间来自己实现一个可行的复选框。 实现方案：QLineEdit + QListView + ...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章