javascript checkbox 分组 可单选 或多选

最新推荐文章于 2023-03-22 09:38:39 发布
最新推荐文章于 2023-03-22 09:38:39 发布
阅读量832 收藏
点赞数
文章标签： json javascript xhtml ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_2164/article/details/82196880
版权 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>调研表</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
}
.STYLE1 {
	color: #000000;
	font-size: 12px;
	font-weight: normal;
}
.STYLE2 {
	color: #000000;
	font-size: 14px;
	font-weight: bold;
}
.STYLE3 {
	color: #000000;
	font-size: 12px;
	font-weight: bold;
}
body,td,th {
	font-size: 12px;
}
.STYLE4 {color: #FF0000}
.STYLE5 {
	color: #FF0000;
	font-weight: bold;
	font-size: 18px;
}
-->
</style>
<script type="text/javascript">
	//isMuti为是否可以多选 checkname为当前的控件调用时给this就行了 hidden为把值放到哪里个隐藏表单域,为隐藏表单域的id
	function checkboxvalue(isMuti ,checkname , hidden ){
		var groups = document.getElementsByTagName("input");
		var namegroups = new Array();
		var index = 0;
		for(i = 0 ;i < groups.length ; i++){
			if(groups[i].type == "checkbox" && groups[i].name == checkname.name){
				namegroups[index] = groups[i];
				index++;
			}
		}
		//判断是多选
		if(isMuti){
			var vals = new Array();
			valindex = 0;
			for(g = 0 ;g < namegroups.length ; g++){
				if(namegroups[g].checked){
					vals[valindex] = namegroups[g].id.replace(checkname.name , "");
					valindex++;
				}
			}
			document.getElementById(hidden).value = vals.join(",");//设置值格式为1,2,3,4,5
			alert(document.getElementById(hidden).value);
		}else{
			var radioval = "";
			//单选
			for(g = 0 ;g < namegroups.length ; g++){
				if(namegroups[g].id != checkname.id){
					namegroups[g].checked = false;
				}else{
					document.getElementById(hidden).value = namegroups[g].id.replace(checkname.name , "");//设置值
					alert(document.getElementById(hidden).value);
				}
			}
		}
	}
	
</script>
</head>

<body>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <th scope="col"><img src="images/banner.jpg" width="750" height="113" /></th>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><table width="750" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th height="30" bgcolor="#FEECBC" scope="col"><span class="STYLE5">产  品 体 验 调 查 表</span></th>
      </tr>
    </table>
      <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF7171">
      <tr>
        <th width="670" bgcolor="#FFFFFF" scope="col"><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF7171">
          <tr>
            <th width="136" rowspan="2" bgcolor="#FFDFDD" scope="col"><span class="STYLE2">您的年龄</span></th>
            <th width="110" height="30" bgcolor="#FFEBE6" scope="col"><span class="STYLE3">20岁以下</span></th>
            <th width="106" bgcolor="#FFEBE6" scope="col">20-30岁</th>
            <th width="106" bgcolor="#FFEBE6" scope="col">30-40岁 </th>
            <th width="94" bgcolor="#FFEBE6" scope="col">40-50岁 </th>
            <th width="106" bgcolor="#FFEBE6" scope="col">50岁以上 </th>
          </tr>
          <tr>
            <td height="25" bgcolor="#FFFFFF"><input id="age1" type="checkbox" name="age" οnclick="checkboxvalue(false , this , 'agehidden')" />
            <input id="agehidden" type="hidden" name="agehidden"  value=""/>
            </td>
            <td bgcolor="#FFFFFF"><input id="age2" type="checkbox" name="age" οnclick="checkboxvalue(false , this , 'agehidden')" /></td>
            <td bgcolor="#FFFFFF"><input id="age3" type="checkbox" name="age" οnclick="checkboxvalue(false , this , 'agehidden')" /></td>
            <td bgcolor="#FFFFFF"><input id="age4" type="checkbox" name="age"  οnclick="checkboxvalue(false , this , 'agehidden')" /></td>
            <td bgcolor="#FFFFFF"><input id="age5" type="checkbox" name="age" οnclick="checkboxvalue(false , this , 'agehidden')" /></td>
          </tr>
        </table></th>
        <th width="80" rowspan="5" bgcolor="#FFFFFF" scope="col"><table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF7171">
          <tr>
            <th width="100%" height="286" bgcolor="#FFFFFF" scope="col"><span class="STYLE1">备注： <br />
              请在符合您情况的选项下面打<strong>√</strong>。存在的问题和建议请用文字进行详细说明<strong>。</strong></span></th>
          </tr>
        </table></th>
      </tr>
      <tr>
        <th width="670" bgcolor="#FFFFFF" scope="col"><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF7171">
          <tr>
            <th width="137" rowspan="2" bgcolor="#FFDFDD" scope="col"><span class="STYLE2">您的学历</span></th>
            <th width="108" height="30" bgcolor="#FFEBE6" scope="col">高中</th>
            <th width="106" bgcolor="#FFEBE6" scope="col">大专</th>
            <th width="106" bgcolor="#FFEBE6" scope="col">本科 </th>
            <th width="96" bgcolor="#FFEBE6" scope="col">硕士</th>
            <th width="105" bgcolor="#FFEBE6" scope="col">博士以上 </th>
          </tr>
          <tr>
            <td height="25" bgcolor="#FFFFFF"><input id="education1" type="checkbox" name="education" οnclick="checkboxvalue(false , this , 'educationhidden')" />
            <input id="educationhidden" type="hidden" name="educationhidden"  value=""/>
            </td>
            <td bgcolor="#FFFFFF"><input id="education2" type="checkbox" name="education" οnclick="checkboxvalue(false , this , 'educationhidden')" /></td>
            <td bgcolor="#FFFFFF"><input id="education3" type="checkbox" name="education" οnclick="checkboxvalue(false , this , 'educationhidden')" /></td>
            <td bgcolor="#FFFFFF"><input id="education4" type="checkbox" name="education" οnclick="checkboxvalue(false , this , 'educationhidden')" /></td>
            <td bgcolor="#FFFFFF"><input id="education5" type="checkbox" name="education" οnclick="checkboxvalue(false , this , 'educationhidden')" /></td>
          </tr>
        </table></th>
        </tr>
      <tr>
        <th bgcolor="#FFFFFF" scope="col"><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#FF7171">
          <tr>
            <th width="137" rowspan="2" bgcolor="#FFDFDD" scope="col"><span class="STYLE2">您常用的产品功能</span></th>
            <th width="108" height="30" bgcolor="#FFEBE6" scope="col">时间控制</th>
            <th width="106" bgcolor="#FFEBE6" scope="col">远程管理</th>
            <th width="105" bgcolor="#FFEBE6" scope="col">双屏互动</th>
            <th width="97" bgcolor="#FFEBE6" scope="col">内容控制</th>
            <th width="105" bgcolor="#FFEBE6" scope="col">上网记录查询</th>
          </tr>
          <tr>
            <td height="25" bgcolor="#FFFFFF"><input id="fun1" type="checkbox" name="fun"  οnclick="checkboxvalue(true , this , 'funhidden')" />
             <input id="funhidden" type="hidden" name="funhidden"  value=""/>
            </td>
            <td bgcolor="#FFFFFF"><input id="fun2" type="checkbox" name="fun" οnclick="checkboxvalue(true , this , 'funhidden')" /></td>
            <td bgcolor="#FFFFFF"><input id="fun3" type="checkbox" name="fun" οnclick="checkboxvalue(true , this , 'funhidden')" /></td>
            <td bgcolor="#FFFFFF"><input id="fun4" type="checkbox" name="fun" οnclick="checkboxvalue(true , this , 'funhidden')" /></td>
            <td bgcolor="#FFFFFF"><input id="fun5" type="checkbox" name="fun" οnclick="checkboxvalue(true , this , 'funhidden')" /></td>
          </tr>
        </table></th>
        </tr>
      <tr>
        <th bgcolor="#FFFFFF" scope="col"><table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF7171">
          <tr>
            <th width="130" height="50" bgcolor="#FFDFDD" scope="col"><span class="STYLE2">产品BUG（包括页面、功能等等）历</span></th>
            <th width="519" colspan="5" bgcolor="#FFFFFF" scope="col">&nbsp;</th>
            </tr>
          
        </table></th>
        </tr>
      <tr>
        <th bgcolor="#FFFFFF" scope="col"><table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF7171">
          <tr>
            <th width="129" height="50" bgcolor="#FFDFDD" scope="col"><span class="STYLE2">存在的问题及建议</span></th>
            <th width="520" colspan="5" bgcolor="#FFFFFF" scope="col">&nbsp;</th>
          </tr>
        </table></th>
        </tr>
    </table></td>
  </tr>
</table>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <th height="40" class="STYLE1 STYLE4" scope="col">备注：参与调查并详细真实完成调查表的用户将有机会获得精美礼品一份。</th>
  </tr>
</table>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <th height="40" class="STYLE1 STYLE4" scope="col"><img src="images/tj.jpg" width="137" height="52" /></th>
  </tr>
</table>
</body>
</html>
 
iteye_2164
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS：支持任意数量的分组checkbox全选功能（几种方法的比较）
赵亮的博客专栏(theforever，碧海情天)
09-21 6399
用JQ写的支持任意数量的分组checkbox全选功能
微信小程序单选radio及多选checkbox按钮用法示例
11-28
本文主要介绍的是如何使用单选按钮（radio）和多选按钮（checkbox）这两种常见的表单元素。以下是对标题和描述中提及的知识点的详细说明： 1. **单选按钮（radio）**： 单选按钮在微信小程序中通常用于提供一系列...
js 实现 复选框分组全选
03-31
js 实现 复选框分组全选! 值得下载看看!资源免费,大家分享!!
js中checkbox分组全选
cqxl999的博客
01-20 207
<?php echo $row["bj"];?>　全选 <div class="danhang"> <?php while(row2=mysqlfetcharray(row2 = mysql_fetch_array(row2=mysqlf​etcha​rray(result2)){ ?> <label><input type="checkbox" name="recname" value="<?ph...
Ext JS 之 CheckboxGroup 扩展
风雪夜归人
06-19 421
          因需（产）求（品）要求，将原由“Ext.ux.form.LovCombo”实现的下拉多选（框）改为复选（框，Checkbox？CheckboxGroup）样（还得可全选），又因数据的加载获取、提交保存均是加“;”（/“,”）形式的字符串，后台程序改起来也可，但就是改动涉及的文件（类）项比较多，又怕影响到别的模块的数据，也就只能硬着头皮通过继承 CheckboxGroup（Ex...
JavaScript 技巧之 Checkbox Group
weixin_33994429的博客
03-12 435
This library lets you quickly and easily make multiple checkboxes behave as a group by limiting the total number of boxes that can be checked and/or have a master control checkbox. ...
checkbox单选多选
04-04
在IT领域，Checkbox是用户界面（UI）设计中不可或缺的一部分，尤其在网页和应用程序中用于收集用户的选择。Checkbox，通常称为复选框，允许用户在多个选项中进行选择，可以同时选择一个或多个选项，这与单选按钮...
vue实现单选和多选功能
08-29
在本文中，我们详细介绍了 Vue 实现单选和多选功能的方法，包括 Radio 和 Checkbox 组件的基本结构、样式和交互逻辑。通过本文，读者可以快速学习 Vue 实现单选和多选功能的方法，并将其应用于实际开发中。
jQuery单选,多选按钮(美化特效)
06-22
在HTML中，单选按钮（`<input type="radio">`）和多选按钮（`<input type="checkbox">`）是常见的表单元素。为了实现美化，我们需要为这些元素添加自定义样式，这通常通过类名或者ID来实现，以便在CSS中针对性地进行...
多个按钮单选/多选，高度自适应
07-09
本话题主要关注的是如何实现“多个按钮的单选或多选，并且具有高度自适应”的功能。这种功能常见于各种应用，例如设置选项、问卷调查或者用户偏好选择等场景。 首先，让我们详细探讨“单选”和“多选”按钮的概念。...
js批量提交checkbox框对应行内容
cxws110的博客
04-04 389
function btnSave(){ var id=$("input[type='checkbox'][disabled!='disabled'][class='pk']:checked").parents("tr").find("input:checkbox"); var jshjje=$("input[type='checkbox'][disabled!='d...
java checkbox 分组_Java中checkbox实现跨页多选的方法
weixin_35931397的博客
03-04 221
Java中checkbox实现跨页多选的方法发布于 2020-7-24|复制链接最近做了一个项目其中遇到这样的需求，要实现checkbox跨页多选功能，经过小妖整理，顺利解决，今天小妖给大家分享Java中checkbox实现跨页多选的方法，需要的的朋友参考下最近要实现一个功能，就是checkbox跨页多选，在网上看了一下，资料很少，而且大多是不完全的。不过经过我的努力，终于做出来了。 JSP...
六.组合多选框组件-CheckboxGroup 和 Checkbox
进阶之路
03-22 1708
在第 5 节，我们完成了具有数据校验功能的组件 Form，本小节继续开发一个新的组件——组合多选框 Checkbox。它作为基础组件，也能集成在 Form 内并应用其验证规则。
HTML : CheckBox 复选框成组联动(JavaScript)
Triumphal
11-29 1万+
在页面中，经常需要控制一组 CheckBox 的选中状态，常用的操作有：1.通过一个或者多个复选框来控制一组 CheckBox 的选中状态。2.根据一组 CheckBox 的选中状态来决定某些控件的状态。如：    一组 CheckBox 中，至少有一项被选中，某个按钮才可以被点击，否则按钮处于灰色状态，不可点击。    一组 CheckBox 中，至少有一项被选中，某个文本框才可以输入内
JQ-checkbox实现单选功能
热门推荐
若末lan的博客
08-27 4万+
<div style="line-height:1.5em;padding: 5px 0;font-size: 14px;"> <ul class="mui-table-view"> <li class="mui-input-row"><input type="checkbox" name="quesA" id="quesA" value="...
checkbox单选和全选
pu329289309的博客
11-02 476
checkbox选择器checkbox单选表头的checkbox全选 checkbox单选 <input type="checkbox" class="relation" value="1" name="Storage" id="model1"/> <input type="checkbox" class="relation" value="2" name="Storage" id="model2"/> $('.relation').on('click', functi
javascript中checkbox单选
最新发布
06-10
通常情况下，使用 checkbox 元素来实现单选功能并不是最佳选择，因为 checkbox 元素本身就是用来表示多选的。 但是，如果你非常需要用 checkbox 元素来实现单选功能，可以使用以下两种方法： 1. 通过设置同名的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值