问一个checkbox点中后自动选中此类别下子选项checkbox的问题

kiseki_m 2013-04-09 01:27:42 
<table>

<tr id="node-1">

   <td>总类一</td>

   <td><input class="inputcheckbox" type="checkbox" name="ids[1][1]"/> 选项1

   <td><input class="inputcheckbox" type="checkbox" name="ids[1][2]"/> 选项2

   <td><input class="inputcheckbox" type="checkbox" name="ids[1][3]"/> 选项3

<tr id="node-10" class="child-of-node-1">

   <td>总类一 分类一</td>

   <td><input class="inputcheckbox" type="checkbox" name="ids[10][1]"/> 选项1

   <td><input class="inputcheckbox" type="checkbox" name="ids[10][2]"/> 选项2

   <td><input class="inputcheckbox" type="checkbox" name="ids[10][3]"/> 选项3

<tr id="node-11" class="child-of-node-1">

   <td>总类一 分类二</td>

   <td><input class="inputcheckbox" type="checkbox" name="ids[11][1]"/> 选项1

   <td><input class="inputcheckbox" type="checkbox" name="ids[11][2]"/> 选项2

   <td><input class="inputcheckbox" type="checkbox" name="ids[11][3]"/> 选项3





<tr id="node-2">

   <td>总类二</td>

   <td><input class="inputcheckbox" type="checkbox" name="ids[2][1]"/> 选项1

   <td><input class="inputcheckbox" type="checkbox" name="ids[2][2]"/> 选项2

   <td><input class="inputcheckbox" type="checkbox" name="ids[2][3]"/> 选项3

<tr id="node-20" class="child-of-node-2">

   <td>总类二 分类一</td>

   <td><input class="inputcheckbox" type="checkbox" name="ids[20][1]"/> 选项1

   <td><input class="inputcheckbox" type="checkbox" name="ids[20][2]"/> 选项2

   <td><input class="inputcheckbox" type="checkbox" name="ids[20][3]"/> 选项3



<tr id="node-3">

   <td>总类二</td>

   <td><input class="inputcheckbox" type="checkbox" name="ids[3][1]"/> 选项1

   <td><input class="inputcheckbox" type="checkbox" name="ids[3][2]"/> 选项2

   <td><input class="inputcheckbox" type="checkbox" name="ids[3][3]"/> 选项3

</table>


样式图：


因为是程序循环出来的，td选项的属性name class都不能改变，仅用现在提供的属性结构，能不能做到点选总类子选项，分类的子选项也会选中

例：点选总类一下的选项1，总类一下所有分类的选项1也会被选中
...全文
349 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
kiseki_m 2013-04-10
  • 打赏
  • 举报
 回复
非常感谢各位大大，学了很多东西！
dylwildwolf 2013-04-09
  • 打赏
  • 举报
 回复
也是jquery版本的，已经测试可行，请引入jquery再实验。另外html代码是作者发的原始的 <script language="javascript"> $(function(){ $(":checkbox").click(function(){ //添加单击事件，分析发现，总类的tr是没有class属性的 if($(this).parents("tr").attr("class")==""){ //获取多选框的name var n=this.name; //获取第一个]之前的部分(不包含]) var firstIndex=n.indexOf(']'); var a=n.substring(0,firstIndex) //获取最后一个[之后的部分(包含[) var lastIndex=n.lastIndexOf('['); var b=n.substring(lastIndex); //相应的子选项选上(name以a开头，以b结尾) if(this.checked){ $(":checkbox[name^='"+a+"'][name$='"+b+"']").attr("checked",true); }else{ $(":checkbox[name^='"+a+"'][name$='"+b+"']").attr("checked",false); } } }); }); </script>
bree06 2013-04-09
  • 打赏
  • 举报
 回复
给一个jquery版的，测试前请引入jquery.js。不用修改任何代码，加入这段js即可 
<script language="javascript">
	$('table tr[id^=node-]:not([class]) input[type=checkbox]').bind('click', function(){
		var text = this.nextSibling.nodeValue, checked = $(this).attr('checked') ? $(this).attr('checked') : false;
		$.each($('table tr.child-of-' + $(this).parents('tr[id^=node-]').attr('id')).find('td'), function() {
			if ($(this).text() == text) {
				$(this).find('input').attr('checked', checked);
			}
		});
	});
</script>
dylwildwolf 2013-04-09
  • 打赏
  • 举报
 回复
先给个思路，是按照name实现的，用jquery 1 总类是有option属性的选项，给这些选项加上点击事件 2 寻找总类选项的两部分内容:第一个]之前的（不包括],记为a）和最后一个[之后的（包括[记为b） 3 将所有选项中以a开头并且以b结尾的选上
scscms太阳光 2013-04-09
  • 打赏
  • 举报
 回复
搞不懂你的checkbox取名怎么取的。 其实你完全可以这样取 name="ids[大分类ID][编号]" 这样选取就方便多了。
functionsub 2013-04-09
  • 打赏
  • 举报
 回复
无限级选中。 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
    function getElementsByClassName(className, element) {
        var children = (element || document).getElementsByTagName('*');
        var elements = new Array();
      
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            var classNames = child.className.split(' ');
            for (var j = 0; j < classNames.length; j++) {
                if (classNames[j] == className) {
                    elements.push(child);
                    break;
                }
            }
        }
        return elements;
    }
    function checkAllChild(parent,tar){
        var self = arguments.callee;
        var parentId = parent.id.split('-')[1];
        var childClass = 'child-of-node-'+parentId;
        var tarOption = tar.getAttribute('option');
        var childTr = getElementsByClassName(childClass,table),len=childTr.length;
        for(var i=0;i<len;i++){
            var childId = childTr[i].id.split('-')[1];
            var shouldCheckName = 'ids['+childId+']['+tarOption+']';
            var checkes = document.getElementsByName(shouldCheckName);
            var inputlen = checkes.length;
            for(var j=0;j<inputlen;j++){
                checkes[j].checked = tar.checked;
            }
            var hasChild = getElementsByClassName('child-of-node-'+childId,table).length==0 ? false : true;
            if(hasChild){
                self(childTr[i],tar);
            }
        }
    }
    window.onload = function(){
        var table = document.getElementById('table');
        table.onclick = function(e){
            e = e || window.event;
            var tar = e.target || e.srcElement;
            if(tar.tagName!='INPUT'){
                return;
            }
            if(tar.type!='checkbox'){
                return;
            }
            
            var parent = tar.parentNode.parentNode;
            
            checkAllChild(parent,tar);
        }
    }
</script>
  <table id="table">
<tr id="node-1">
   <td>总类一</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[1][1]" option="1"/> 选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[1][2]" option="2"/> 选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[1][3]" option="3"/> 选项3
</tr>
<tr id="node-10" class="child-of-node-1">
   <td>总类一 分类一</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[10][1]"/> 选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[10][2]"/> 选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[10][3]"/> 选项3
</tr>
<tr id="node-11" class="child-of-node-1">
   <td>总类一 分类二</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[11][1]" option="1"/> 选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[11][2]" option="2"/> 选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[11][3]" option="3"/> 选项3
 </tr>
 <tr id="node-110" class="child-of-node-11">
   <td>总类一 分类二 分类1</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[110][1]" option="1"/> 选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[110][2]" option="2"/> 选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[110][3]" option="3"/> 选项3
 </tr>
  <tr id="node-112" class="child-of-node-110">
   <td>总类一 分类二 分类1 分类A</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[112][1]"/> 选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[112][2]"/> 选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[112][3]"/> 选项3
 </tr>
<tr id="node-2">
   <td>总类二</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[2][1]" option="1"/> 选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[2][2]" option="2"/> 选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[2][3]" option="3"/> 选项3
</tr>
<tr id="node-20" class="child-of-node-2">
   <td>总类二 分类一</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[20][1]"/> 选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[20][2]"/> 选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[20][3]"/> 选项3
</tr>
<tr id="node-3">
   <td>总类二</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[3][1]"/> 选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[3][2]"/> 选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[3][3]"/> 选项3
</tr>
</table>
kiseki_m 2013-04-09
  • 打赏
  • 举报
 回复


图例
kiseki_m 2013-04-09
  • 打赏
  • 举报
 回复
引用 1 楼 functionsub 的回复:
XML/HTML code?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788<scrip……
这位大大厉害，但是这列表其实是通过后台一条程序循环出来的， <?php echo $categorys;?> 的循环语句，所以后台如果再添加新的选项3或者分类四啥的 比如添加一个 
<tr id="node-110" class="child-of-node-11">
   <td>总类一 分类二 分类1</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[110][1]"/> 选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[110][2]"/> 选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[110][3]"/> 选项3
 </tr>
该怎么办呢，我给分类二同样添加option属性，好像没用……头都大了
rjzou2006 2013-04-09
  • 打赏
  • 举报
 回复
牛逼 楼上。
functionsub 2013-04-09
  • 打赏
  • 举报
 回复 
<script type="text/javascript"> 
    function getElementsByClassName(className, element) {
        var children = (element || document).getElementsByTagName('*');
        var elements = new Array();
      
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            var classNames = child.className.split(' ');
            for (var j = 0; j < classNames.length; j++) {
                if (classNames[j] == className) {
                    elements.push(child);
                    break;
                }
            }
        }
        return elements;
    }
   window.onload = function(){
        var table = document.getElementById('table');
        table.onclick = function(e){
            e = e || window.event;
            var tar = e.target || e.srcElement;
            if(tar.tagName!='INPUT'){
                return;
            }
            if(tar.type!='checkbox'){
                return;
            }
            
            var parent = tar.parentNode.parentNode;
            var isParent = parent.className == '' && parent.className.indexOf('child-of-node')==-1
            if(isParent){
                var parentId = parent.id.split('-')[1];
                var childClass = 'child-of-node-'+parentId;
                var tarOption = tar.getAttribute('option');
                var childTr = getElementsByClassName(childClass,table),len=childTr.length;
                for(var i=0;i<len;i++){
                    var childId = childTr[i].id.split('-')[1];
                    var shouldCheckName = 'ids['+childId+']['+tarOption+']';
                    var checkes = document.getElementsByName(shouldCheckName);
                    var inputlen = checkes.length;
                    for(var j=0;j<inputlen;j++){
                        checkes[j].checked = tar.checked;
                    }
                }
            }
        }
    }
</script>
  <table id="table">
<tr id="node-1">
   <td>总类一</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[1][1]" option="1"/> 选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[1][2]" option="2"/> 选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[1][3]" option="3"/> 选项3
</tr>
<tr id="node-10" class="child-of-node-1">
   <td>总类一 分类一</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[10][1]"/> 选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[10][2]"/> 选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[10][3]"/> 选项3
</tr>
<tr id="node-11" class="child-of-node-1">
   <td>总类一 分类二</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[11][1]"/> 选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[11][2]"/> 选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[11][3]"/> 选项3
 </tr>
 
<tr id="node-2">
   <td>总类二</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[2][1]" option="1"/> 选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[2][2]" option="2"/> 选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[2][3]" option="3"/> 选项3
</tr>
<tr id="node-20" class="child-of-node-2">
   <td>总类二 分类一</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[20][1]"/> 选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[20][2]"/> 选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[20][3]"/> 选项3
</tr>
<tr id="node-3">
   <td>总类二</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[3][1]" option="1"/> 选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[3][2]" option="2"/> 选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[3][3]" option="3"/> 选项3
</tr>
</table>
给父节点添加了一个option属性。。。用来获取第几个选项的，虽然可以分析name去搞，但是我实在是懒得去分析。。。
JS实现选中一级复选框相关二级或父级同时被选
JS实现选中一级复选框相关二级或父级同时被选;子级全部选中，父级自动选中；父级选中，子级全部选中。做权限功能可用到。html页面。
el-checkbox 选中一个时，却把所有都选中了
<el-form-item label="数据信息" style="margin-bottom:-20px !important"> <el-checkbox-group v-model="form.dataInfo" style="width:88%"> <el-checkbox label="事件IP" name="fsd"></el-checkbox> <el-checkbox label="
el-checkbox为甚点击一个其他的全部都选中了，或者为什么选中的绑定的获取的不是label而是true或者false呢?获取label但是不显示
  &lt;el-checkbox-group v-model="type"&gt;        &lt;el-checkbox label="美食/餐厅线上活动" name="type"&gt;  &lt;/el-checkbox&gt;       &lt;el-checkbox label="地推活动" name="type"&gt
QT之CheckBox单项选择与多项选择
QT之CheckBox单项选择与多项选择 开篇之叙 今天简单的给大家介绍下CheckBox的单项选择与多项选择。我们在使用CheckBox时，就好比我们做选择题一样，有单项，也有多项选择题。那么，我们QT能不能做到这效果呢，答案是肯定的。怎么做？其实很简单。我们先看看效果图 效果图 这里我们看到的是多选项 我们再来看看单项选择 好了，到了这里相信大家都想赶紧看看代码了。 上代码 //其实方法很简单，你只需要这样做。 void ButtonGroup::initCheckBox.
android 实现ListView嵌套Checkbox实现真正的多选、全选、反选、取消
android 实现ListView嵌套Checkbox实现真正的多选、全选、反选、取消        我们在开发APP的时候，很多情况下会使用到ListView嵌套CheckBox的情况，例如购物车选择商品的情况，其实很多人要说这个其实很简单了，并没有那么复杂，事实上并非如此，我们在使用ListView嵌套CheckBox复选框的时候会出现很多问题，接下来我将用一篇博客来说明这些问题，给大家一些...
JavaScript

87,992

社区成员

224,685

社区内容

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

加载中

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

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

+ 用AI写文章