技术问题 （怎么通过js控制好几组的单选按钮）

国产野马 2017-08-21 08:52:53
我现在有好几组的单选按钮，怎么通过js 动态的控制这些按钮有几个被选了 几个没选呢 类似于下图的效果
...全文
282 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
起个名真费劲啊 2017-08-21
  • 打赏
  • 举报
 回复
我在想 楼主你是不是gay
青蛙Keroro 2017-08-21
  • 打赏
  • 举报
 回复
多个form JQ好像有问题 加个div 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
  
<body>
<div id="div1">
<form id="test1" name="test1">
男的女的？<br>
<label><input type="radio" name="sex" value="man"/>男</label>
<label><input type="radio" name="sex" value="woman"/>女<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay" value="sure"/>是的<label>
<label><input type="radio" name="isGay" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay1" value="sure"/>是的<label>
<label><input type="radio" name="isGay1" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay2" value="sure"/>是的<label>
<label><input type="radio" name="isGay2" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay3" value="sure"/>是的<label>
<label><input type="radio" name="isGay3" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay4" value="sure"/>是的<label>
<label><input type="radio" name="isGay4" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay5" value="sure"/>是的<label>
<label><input type="radio" name="isGay5" value="no"/>没错<label><br>
</form>
</div>

<br>
完成度
<br>
<span id="num">0</span><span>/7</span>
</body>
<script type="text/javascript">
$(function(){
	//绑定点击
　　$("#div1 input[type='radio']").on('click',function(){
	//获取勾选个数赋值 #num
      $("#num").html($("#div1 input[type='radio']:checked").length);
    })
}); 
</script>
</html>
国产野马 2017-08-21
  • 打赏
  • 举报
 回复
大致看了看代码，应该管用，还没试，但是你写的html 好个性！！！
青蛙Keroro 2017-08-21
  • 打赏
  • 举报
 回复
写得很粗，可以感受下。。。。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
  
<body>
<form id="test1">
男的女的？<br>
<label><input type="radio" name="sex" value="man"/>男</label>
<label><input type="radio" name="sex" value="woman"/>女<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay" value="sure"/>是的<label>
<label><input type="radio" name="isGay" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay1" value="sure"/>是的<label>
<label><input type="radio" name="isGay1" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay2" value="sure"/>是的<label>
<label><input type="radio" name="isGay2" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay3" value="sure"/>是的<label>
<label><input type="radio" name="isGay3" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay4" value="sure"/>是的<label>
<label><input type="radio" name="isGay4" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay5" value="sure"/>是的<label>
<label><input type="radio" name="isGay5" value="no"/>没错<label><br>
</form>
<br>
完成度
<br>
<span id="num">0</span><span>/7</span>
</body>
<script type="text/javascript">
$(function(){
	//绑定点击
　　$("#test1 label>input[type='radio']").on('click',function(){
	//获取勾选个数赋值 #num
      $("#num").html($("#test1 label>input[type='radio']:checked").length);
    })
}); 
</script>
</html>
国产野马 2017-08-21
  • 打赏
  • 举报
 回复
没有老大哥给我解答么，在线等
青蛙Keroro 2017-08-21
  • 打赏
  • 举报
 回复
引用 8 楼 d08214 的回复:
[quote=引用 4 楼 qq_24616533 的回复:] 多个form JQ好像有问题 加个div 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
  
<body>
<div id="div1">
<form id="test1" name="test1">
男的女的？<br>
<label><input type="radio" name="sex" value="man"/>男</label>
<label><input type="radio" name="sex" value="woman"/>女<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay" value="sure"/>是的<label>
<label><input type="radio" name="isGay" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay1" value="sure"/>是的<label>
<label><input type="radio" name="isGay1" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay2" value="sure"/>是的<label>
<label><input type="radio" name="isGay2" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay3" value="sure"/>是的<label>
<label><input type="radio" name="isGay3" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay4" value="sure"/>是的<label>
<label><input type="radio" name="isGay4" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay5" value="sure"/>是的<label>
<label><input type="radio" name="isGay5" value="no"/>没错<label><br>
</form>
</div>

<br>
完成度
<br>
<span id="num">0</span><span>/7</span>
</body>
<script type="text/javascript">
$(function(){
	//绑定点击
　　$("#div1 input[type='radio']").on('click',function(){
	//获取勾选个数赋值 #num
      $("#num").html($("#div1 input[type='radio']:checked").length);
    })
}); 
</script>
</html>
你写的html里面的选项真是没谁了[/quote] 结帖吧
国产野马 2017-08-21
  • 打赏
  • 举报
 回复
引用 4 楼 qq_24616533 的回复:
多个form JQ好像有问题 加个div 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
  
<body>
<div id="div1">
<form id="test1" name="test1">
男的女的？<br>
<label><input type="radio" name="sex" value="man"/>男</label>
<label><input type="radio" name="sex" value="woman"/>女<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay" value="sure"/>是的<label>
<label><input type="radio" name="isGay" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay1" value="sure"/>是的<label>
<label><input type="radio" name="isGay1" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay2" value="sure"/>是的<label>
<label><input type="radio" name="isGay2" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay3" value="sure"/>是的<label>
<label><input type="radio" name="isGay3" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay4" value="sure"/>是的<label>
<label><input type="radio" name="isGay4" value="no"/>没错<label><br>
是不是gay?<br>
<label><input type="radio" name="isGay5" value="sure"/>是的<label>
<label><input type="radio" name="isGay5" value="no"/>没错<label><br>
</form>
</div>

<br>
完成度
<br>
<span id="num">0</span><span>/7</span>
</body>
<script type="text/javascript">
$(function(){
	//绑定点击
　　$("#div1 input[type='radio']").on('click',function(){
	//获取勾选个数赋值 #num
      $("#num").html($("#div1 input[type='radio']:checked").length);
    })
}); 
</script>
</html>
你写的html里面的选项真是没谁了
国产野马 2017-08-21
  • 打赏
  • 举报
 回复
引用 5 楼 qq_39066086 的回复:
我在想 楼主你是不是gay
平白无故的就说是gay 为什么啊
国产野马 2017-08-21
  • 打赏
  • 举报
 回复
为什么这么说？ 平白无故的就说我是gay
JavaScript网页特效范例宝典源码
实例072 通过单选按钮控制其他表单元素是否可用 117 2.4 复选框 117 实例073 不提交表单获取复选框的值 118 实例074 控制复选框的全选或反选 118 实例075 只有一个复选框时控制复选框的全选或反选 119 2.5 密码域 ...
radio----单选按钮组（在一个页面实现多组单选按钮）
radio----单选按钮组（在一个页面实现多组单选按钮）单选按钮组的实现 单选按钮组的实现 几个注意的点： 要让按钮显示激活状态，label的class里添加active属性 要具有激活状态，在之后js判断中能读到，在input里加 ...
jquery如何获取一组单选按钮中是哪一个单选按钮被选中
jquery如何获取一组单选按钮中是哪一个单选按钮被选中
如何通过一组单选按钮控制来控制对应的一组div，就是点击按钮对应的div进行改变，类似于div互斥的样子！（小菜鸟入门小白教程）
通过一组单选按钮来控制一组div变化。就比如有三个单选按钮，然后三个div，一个按钮关联一个div，当我点击按钮时对应的div进行变化，然后点另外的一个按钮，它对应的div变化，当前选中的恢复。 二、解决办法 ...
《vue3实战》运用radio单选按钮或Checkbox复选框实现单选多选的试卷制作
radio单选按钮和Checkbox复选框都是制作试卷很方便的好工具好方法，单选按钮还有的作用是让用户在一组选项中选择一个选项，并将其值作为表单数据传递给后端进行处理。它可以用于数据筛选、选项说明以及用户界面控制...
Java EE

67,515

社区成员

225,878

社区内容

发帖
与我相关
我的任务
社区描述
J2EE只是Java企业应用。我们需要一个跨J2SE/WEB/EJB的微容器，保护我们的业务核心组件（中间件），以延续它的生命力，而不是依赖J2SE/J2EE版本。
社区管理员
  • Java EE
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

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

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

+ 用AI写文章