87,923
社区成员
发帖
与我相关
我的任务
分享请教一个JS CheckBox多级级联的写法，用Jquery实现最好！谢谢！
本人的JS水平实在太差了，最近在项目中需要用到 JS 多级级联选择的应用，请教下 checkbox的实现代码，谢谢各位了，感激不尽！
...全文
请发表友善的回复…
发表回复
wwfgu00ing 2011-02-13
- 打赏
- 举报
function CheckAll(flag)
{
var table = document.getElementById("<%=Repeater1.ClientID %>");
var inputs = table.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
if(inputs[i].type=="checkbox"){
inputs[i].checked= true;
}
}
}
--------------------
<script type="text/javascript" src="Scripts/jquery-1.3.2.js">
</script>
<script type="text/javascript">
$(function() {
$("#checkbox1").click(function() {
if ($(this).is(":checked")) {
$("#select1").show();
}
else {
$("#select1").hide();
}
});
});
</script>
--------
function SelectAll(chkbox)
{
var box=chkbox;
state=theBox.checked;
elem=box.form.elements;
for(i=0;i<elem.length;i++)
if(elem[i].type=="checkbox" && elem[i].id!=box.id)
{
if(elem[i].checked!=state)
{
elem[i].click();
}
}
}
<input id="chkAll" onclick="SelectAll(this)"; type=checkbox>
hoojo 2011-02-12
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>checkboxCascade.html</title>
<meta http-equiv="author" content="blog.csdn.net/IBM_hoojo">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var $ = function (id) {
return document.getElementById(id);
}
var checkedBox = function (id, isChecked, childLength) {
for (var i = 1; i <= childLength; i++) {
if (!!$(id + i)) {
if (isChecked) {
$(id + i).setAttribute("checked", "checked");
checkedBox($(id + i).id + "_", $(id + i).checked, 4);
} else {
$(id + i).setAttribute("checked", false);
$(id + i).removeAttribute("checked");
checkedBox($(id + i).id + "_", $(id + i).checked, 4);
}
}
}
};
window.onload = function () {
$("box1").onclick = function () {
checkedBox(this.id + "_", this.checked, 4);
};
$("box2").onclick = function () {
checkedBox(this.id + "_", this.checked, 4);
};
for (var i = 1; i <= 4; i++) {
$("box1_" + i).onclick = function () {
checkedBox(this.id + "_", this.checked, 3);
};
$("box2_" + i).onclick = function () {
checkedBox(this.id + "_", this.checked, 3);
};
}
};
</script>
</head>
<body>
<input type="checkbox" id="box1"/>Java
<input type="checkbox" id="box2"/>.Net
<hr/>
<input type="checkbox" id="box1_1"/>Spring
<input type="checkbox" id="box1_2"/>Struts
<input type="checkbox" id="box1_3"/>Hibernate
<input type="checkbox" id="box1_4"/>MyBatis
<br/>
<input type="checkbox" id="box2_1"/>Net Spring
<input type="checkbox" id="box2_2"/>Net Struts
<input type="checkbox" id="box2_3"/>NHibernate
<input type="checkbox" id="box2_4"/>Net MyBatis
<hr/>
<input type="checkbox" id="box1_1_1"/>Spring v2.0
<input type="checkbox" id="box1_1_2"/>Spring v2.5
<input type="checkbox" id="box1_1_3"/>Spring v3.0
<br/>
<input type="checkbox" id="box1_2_1"/>Struts v1.x
<input type="checkbox" id="box1_2_2"/>Struts v2.x
<hr/>
<input type="checkbox" id="box2_1_1"/>Net Spring v2.0
<input type="checkbox" id="box2_1_2"/>Net Spring v2.5
<input type="checkbox" id="box2_1_3"/>Net Spring v3.0
<br/>
<input type="checkbox" id="box2_2_1"/>Net Struts v1.x
<input type="checkbox" id="box2_2_2"/>Net Struts v2.x
</body>
</html>
基本思路就这样，你可以看看。不符合的可以自己改改
「已注销」 2011-02-12
- 打赏
- 举报
....就是在网上没找着合适的，所以才来CSDN请教啊。。。我都找了好几天了，都不咋滴。。。
Cike121272604 2011-02-12
- 打赏
- 举报
lz，让大家这么贴出来不太好吧，应该到网上下代码，成品的多好...
