我要实现的如下图。选择父节点时选择所有子节点,选择子节点自动选中父节点
我实现的方法如下。 要求把js改成jquery写,求高人啊(复制我的代码可直接运行)<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultTest.aspx.cs" Inherits="aUser_DefaultTest" %><!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 runat="server">
<title></title>
<script type="text/javascript">
Array.prototype.inArray = function (value) {
var i;
for (i = 0; i < this.length; i++) {
if (this[i] === value) { return true; }
} return false
};
function checkSibling(list, id) { //检查同辈的checkbox是否有被选中的。无被选中的则返回-1
var index = -1;
for (i = 0; i < list.length; i++) {
if (list[i].checked == true && list[i].id.indexOf(id) != -1 && id.split('_').length == list[i].id.split('_').length) {
index = 1;
break;
}
}
return index;
}
function changebox(list, id, t) {
var ids = id.split("_");
var arr = new Array();
var lastid = "";
var siblingid = "";
var a = "";
for (k = 0; k < ids.length; k++) {
a += a.length == 0 ? ids[k] : '_' + ids[k];
if (k == ids.length - 2) { siblingid = a + '_' } //得到与当前checkbox同辈的命名标识
if (k == ids.length - 1) { lastid = a + '_' } //得到一个往下查找的ID命名标识
arr.push(a); //得到一个直系往上查找的id数组
}
var index = checkSibling(list, siblingid); //判断当前checkbox是否有与其同辈的已经被选中
for (i = 0; i < list.length; i++) {
if (list[i].type == "checkbox") {
if (t == false && index != -1) {
//如果当前为取消选中时且同辈的有被选中的:则不往上查找,保证只往下查找
if ((arr.inArray(list[i].id) || list[i].id.indexOf(lastid) != -1) && list[i].id.split('_').length > id.split("_").length) {
list[i].checked = t;
} } else {
if ((arr.inArray(list[i].id) || list[i].id.indexOf(lastid) != -1)) {
list[i].checked = t;
}
}
}
}
}
function bindCheckbox() {
var list = document.getElementById("boxlist").getElementsByTagName("input");
for (i = 0; i < list.length; i++) {
(function (n) {
if (list[n].type == "checkbox") {
var id = list[n].id;
var marginv = id.split("_").length * 20;
document.getElementById(id).style.margin = "0px 0px 0px " + marginv + "";
list[n].onclick = function () {
changebox(list, id, this.checked);
}
}
})(i)
}
}
window.onload = function () {
bindCheckbox();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="cursor: pointer" id="boxlist">
<div style="color: #525252; font-weight: bold">
<input id="cbox1" value="1" type="checkbox"><label>分类1</label></div>
<div style="width: 200px; float: left">
<input id="cbox1_2" value="2" type="checkbox"><label for="cbox1_2" value="2">分类1.1</label></div>
<div style="width: 200px; float: left">
<input id="cbox1_3" value="3" type="checkbox"><label for="cbox1_3" value="3">分类1.2</label></div>
<div style="clear: both">
</div>
<div style="color: #525252; font-weight: bold">
<input id="cbox2" value="4" type="checkbox"><label>分类2</label></div>
<div style="width: 200px; float: left">
<input id="cbox2_5" value="5" type="checkbox"><label for="cbox2_5" value="5">分类2.1</label></div>
<div style="width: 200px; float: left">
<input id="cbox2_6" value="6" type="checkbox"><label for="cbox2_6" value="6">分类2.2</label></div>
<div style="width: 200px; float: left">
<input id="cbox2_7" value="7" type="checkbox"><label for="cbox2_7" value="7">分类2.3</label></div>
<div style="clear: both">
</div>
<div style="color: #525252; font-weight: bold">
<input id="cbox3" value="8" type="checkbox"><label>分类3</label></div>
<div style="width: 200px; float: left">
<input id="cbox3_9" value="9" type="checkbox"><label for="cbox3_9" value="9">分类3.1</label></div>
<div style="clear: both">
</div>
</div>
</form>
</body>
</html>
我实现的方法如下。 要求把js改成jquery写,求高人啊(复制我的代码可直接运行)<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultTest.aspx.cs" Inherits="aUser_DefaultTest" %><!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 runat="server">
<title></title>
<script type="text/javascript">
Array.prototype.inArray = function (value) {
var i;
for (i = 0; i < this.length; i++) {
if (this[i] === value) { return true; }
} return false
};
function checkSibling(list, id) { //检查同辈的checkbox是否有被选中的。无被选中的则返回-1
var index = -1;
for (i = 0; i < list.length; i++) {
if (list[i].checked == true && list[i].id.indexOf(id) != -1 && id.split('_').length == list[i].id.split('_').length) {
index = 1;
break;
}
}
return index;
}
function changebox(list, id, t) {
var ids = id.split("_");
var arr = new Array();
var lastid = "";
var siblingid = "";
var a = "";
for (k = 0; k < ids.length; k++) {
a += a.length == 0 ? ids[k] : '_' + ids[k];
if (k == ids.length - 2) { siblingid = a + '_' } //得到与当前checkbox同辈的命名标识
if (k == ids.length - 1) { lastid = a + '_' } //得到一个往下查找的ID命名标识
arr.push(a); //得到一个直系往上查找的id数组
}
var index = checkSibling(list, siblingid); //判断当前checkbox是否有与其同辈的已经被选中
for (i = 0; i < list.length; i++) {
if (list[i].type == "checkbox") {
if (t == false && index != -1) {
//如果当前为取消选中时且同辈的有被选中的:则不往上查找,保证只往下查找
if ((arr.inArray(list[i].id) || list[i].id.indexOf(lastid) != -1) && list[i].id.split('_').length > id.split("_").length) {
list[i].checked = t;
} } else {
if ((arr.inArray(list[i].id) || list[i].id.indexOf(lastid) != -1)) {
list[i].checked = t;
}
}
}
}
}
function bindCheckbox() {
var list = document.getElementById("boxlist").getElementsByTagName("input");
for (i = 0; i < list.length; i++) {
(function (n) {
if (list[n].type == "checkbox") {
var id = list[n].id;
var marginv = id.split("_").length * 20;
document.getElementById(id).style.margin = "0px 0px 0px " + marginv + "";
list[n].onclick = function () {
changebox(list, id, this.checked);
}
}
})(i)
}
}
window.onload = function () {
bindCheckbox();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="cursor: pointer" id="boxlist">
<div style="color: #525252; font-weight: bold">
<input id="cbox1" value="1" type="checkbox"><label>分类1</label></div>
<div style="width: 200px; float: left">
<input id="cbox1_2" value="2" type="checkbox"><label for="cbox1_2" value="2">分类1.1</label></div>
<div style="width: 200px; float: left">
<input id="cbox1_3" value="3" type="checkbox"><label for="cbox1_3" value="3">分类1.2</label></div>
<div style="clear: both">
</div>
<div style="color: #525252; font-weight: bold">
<input id="cbox2" value="4" type="checkbox"><label>分类2</label></div>
<div style="width: 200px; float: left">
<input id="cbox2_5" value="5" type="checkbox"><label for="cbox2_5" value="5">分类2.1</label></div>
<div style="width: 200px; float: left">
<input id="cbox2_6" value="6" type="checkbox"><label for="cbox2_6" value="6">分类2.2</label></div>
<div style="width: 200px; float: left">
<input id="cbox2_7" value="7" type="checkbox"><label for="cbox2_7" value="7">分类2.3</label></div>
<div style="clear: both">
</div>
<div style="color: #525252; font-weight: bold">
<input id="cbox3" value="8" type="checkbox"><label>分类3</label></div>
<div style="width: 200px; float: left">
<input id="cbox3_9" value="9" type="checkbox"><label for="cbox3_9" value="9">分类3.1</label></div>
<div style="clear: both">
</div>
</div>
</form>
</body>
</html>
解决方案 »
- **************Image对象 内存不足错误。***********
- 我想用ASP.NET、C#来在网页中实现像Excl一样的动态编辑,有好办法吗?谢谢!!
- 关于用户控件的事件
- 最后1分了,怎样把这段vb代码转为c#的?
- 如何使textbox背景色变灰
- 请各位大哥帮忙接近
- 用datareader从数据库检索出后的数据怎么在页面上分页显示?是不是只能够用dataset才能够分页显示呢?
- Asp.net+Sql Server ,如何实现在页面上自动生成图表
- 一个dropdownlist的数据邦定问题,有经验的高手过来帮帮我吧?
- 大家说说一个公司的技术总监应该干些什么?
- asp.net 主窗体打开child窗体
- 对话框问题
原生的js就不错么
$(function () {
$("input[type='checkbox']").click( function () {
var id = $(this).attr("id");
var fid = id.substring(0, id.indexOf("_"));
$("#" + fid).attr("Checked", $(this).prop("checked"));
$("input[id ^='" + id+"']").attr("Checked", $(this).prop("checked"));
});
});