嘿嘿，清洁工来解决问题拿分

lihan6415151528 2008-12-26 09:52:32

一组checkbox，我想选中某一个之后，立即将这个选项移到另外一组checkbox中
类似于select的移动选项那样

...全文

115 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

lihan6415151528 2008-12-26

打赏
举报

两种方法都学习了，一种是通过appendChild
另一种通过设置隐藏显示
结贴。

王集鹄 2008-12-26

打赏
举报

参考如下代码：

<html>

<body>

<div id="div_true" style="height:200px;width:200px;background-color:Red;">

	<div><input type="checkbox" id="checkbox_1_true" /><label for="checkbox_1_true">1</label></div>

	<div><input type="checkbox" id="checkbox_2_true" /><label for="checkbox_2_true">2</label></div>

	<div><input type="checkbox" id="checkbox_3_true" /><label for="checkbox_3_true">3</label></div>

	<div><input type="checkbox" id="checkbox_4_true" /><label for="checkbox_4_true">4</label></div>

</div>

<div id="div_false" style="height:200px;width:200px;background-color:Green;">

	<div style="display:none"><input type="checkbox" id="checkbox_1_false" /><label for="checkbox_1_false">1</label></div>

	<div style="display:none"><input type="checkbox" id="checkbox_2_false" /><label for="checkbox_2_false">2</label></div>

	<div style="display:none"><input type="checkbox" id="checkbox_3_false" /><label for="checkbox_3_false">3</label></div>

	<div style="display:none"><input type="checkbox" id="checkbox_4_false" /><label for="checkbox_4_false">4</label></div>

</div>

<script type="text/javascript">

function $(id) { return document.getElementById(id); }

var checkboxs = $("div_true").getElementsByTagName("input");

for (var i = 0; i < checkboxs.length; i++) {

	checkboxs[i].onclick = function () {

		this.parentNode.style.display = "none";

		var obj = $(this.id.replace(/_true$/ig, "_false"));

		obj.parentNode.style.display = "block";

		obj.checked = true;

	}

}



var checkboxs = $("div_false").getElementsByTagName("input");

for (var i = 0; i < checkboxs.length; i++) {

	checkboxs[i].onclick = function () {

		this.parentNode.style.display = "none";

		var obj = $(this.id.replace(/_false$/ig, "_true"));

		obj.parentNode.style.display = "block";

		obj.checked = false;

	}

}

</script>

</body>

</html>

wyj1983 2008-12-26

打赏
举报

[Quote=引用 1 楼 lsc1202001 的回复:]
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<div id="unchecked">
<label><input type="checkbox">工会1</label>
<label><input type="checkbox">工会2</label>
<label><input type="checkbox">工会3</label>
<label><input type="checkbox">工会4</label>
<label><input type="che…
[/Quote]

收藏了

lsc1202001 2008-12-26

打赏
举报



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

 </HEAD>

 <BODY>

	<div id="unchecked">

	 <label><input type="checkbox">工会1</label>

	 <label><input type="checkbox">工会2</label>

	 <label><input type="checkbox">工会3</label>

	 <label><input type="checkbox">工会4</label>

	 <label><input type="checkbox">工会5</label>

	</div>

    <br><br>

	<div id="checked">

	  <label><input type="checkbox" checked>工会6</label>

	  <label><input type="checkbox" checked>工会7</label>

	  <label><input type="checkbox" checked>工会8</label>

	  <label><input type="checkbox" checked>工会9</label>

	  <label><input type="checkbox" checked>工会10</label>

	</div>

 </BODY>

 <script>

	var unchecked = document.getElementById("unchecked");

	var checked = document.getElementById("checked");

	var lblArr = document.getElementsByTagName("label");

	for(var i=0;i<lblArr.length;i++){

		lblArr[i].firstChild.onclick = function(){

			if(this.checked){

				checked.appendChild(this.parentNode);

			}else{

				unchecked.appendChild(this.parentNode);	

			}

		}

	}

 </script>

</HTML>