【高分求解】利用js实现一个下来列表创建checkbox多选框

pengyu0864 2011-08-29 08:24:18

举例:
下拉列表里面的项分别是,同学,朋友.
当我选择同学的时候,下面就创建出,张三,李四,王五的多选框..

...全文

296 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

凌风雪雕 2011-08-30

打赏
举报

呵呵支持下

MuBeiBei 2011-08-30

打赏
举报

pengyu0864 2011-08-30

打赏
举报

[Quote=引用 13 楼 mubeibei 的回复:]
HTML code
<!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-eq……
[/Quote]

好了。。太谢谢师兄了。。结贴。。。。。。javascript好强啊你的...

MuBeiBei 2011-08-30

打赏
举报

<!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>

<body>

<select id="sel">

    <option>--请选择--</option>

    <option value="s">同学</option>

    <option value="f">朋友</option>

</select>

<div id="d"></div>

<script type="text/javascript">

    var obj = {

        s:['张三','李四','王五','张三','李四','王五','张三','李四','王五'],

        f:['朋友','好朋友']    

    }

    document.getElementById('sel').onchange = function(){

        document.getElementById('d').innerHTML = '';

        var value = this[this.selectedIndex].value;

        var arr = obj[value];

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

            var checkbox = document.createElement('input');

            checkbox.type = 'checkbox';

            document.getElementById('d').appendChild(checkbox);

            document.getElementById('d').innerHTML += arr[i];

			if(i % 4 == 3 && i != 0){

				document.getElementById('d').innerHTML += '<br />'	

			}

        }

    };

</script>

</body>

</html>

不定义宽度，这样也可以，用js判断~·4个就换行~·

MuBeiBei 2011-08-30

打赏
举报

<!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>

	#d{width:220px;}

</style>

<body>

<select id="sel">

    <option>--请选择--</option>

    <option value="s">同学</option>

    <option value="f">朋友</option>

</select>

<div id="d"></div>

<script type="text/javascript">

    var obj = {

        s:['张三','李四','王五','张三','李四','王五'],

        f:['朋友','好朋友']    

    }

    document.getElementById('sel').onchange = function(){

        document.getElementById('d').innerHTML = '';

        var value = this[this.selectedIndex].value;

        var arr = obj[value];

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

            var checkbox = document.createElement('input');

            checkbox.type = 'checkbox';

            document.getElementById('d').appendChild(checkbox);

            document.getElementById('d').innerHTML += arr[i];

        }

    };

</script>

</body>

</html>

这个宽度你根据文字调下~·

pengyu0864 2011-08-30

打赏
举报

[Quote=引用 8 楼 mubeibei 的回复:]

var obj = {
s:['张三','李四','王五'],
f:['朋友','好朋友']
}
document.getElementById('sel').onchange = function(){
document.getElementById('d').innerHTML = '';
v……
[/Quote]

师兄，现在我该做的都做了。。就是剩最后一个排版的问题了。。
我把输出的div设置了宽度。。但是这样输出后，生成的控件不会自己换行，而且占满了宽度后，才换行
本来是同一项的字都有一半换到了第二行了，这样看起来很不美观。。
有什么方法能够处理一下呢？
比如一行只生成4个控件。。

pjg1989 2011-08-30

打赏
举报

楼上的已经帮你解决了，我就看看，不说话

pengyu0864 2011-08-29

打赏
举报

[Quote=引用 6 楼 mubeibei 的回复:]

引用 4 楼 pengyu0864 的回复:
引用 2 楼 mubeibei 的回复:

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http……
[/Quote]

我照着你给的改了 ,然后给它设置了value,但是当我选择不同的下拉列表后,动态生成的checkbox一直是存在的,并且一直累加...多选几次,页面都铺满了checkbox

MuBeiBei 2011-08-29

打赏
举报

[Quote=引用 4 楼 pengyu0864 的回复:]
引用 2 楼 mubeibei 的回复:

HTML code
<!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"……
[/Quote]

外面不是有一个div，然后给这个div定义样式就行了

div input{}这样定义就行了

嗯动态生成的代码源码是看不到的~·能取到值

var obj = {

		s:['张三','李四','王五'],

		f:['朋友','好朋友']	

	}

	document.getElementById('sel').onchange = function(){

		document.getElementById('d').innerHTML

		var value = this[this.selectedIndex].value;

		var arr = obj[value];

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

			var checkbox = document.createElement('input');

			checkbox.type = 'checkbox';

			checkbox.id = 'cb'+i;//加个id

			document.getElementById('d').appendChild(checkbox);

			document.getElementById('d').innerHTML += arr[i];

		}

	};

这样加个动态id就行了~·
第一个就是cb0以此类推。。。

或者document.getElementsByTagName('input')然后循环也行~·

pengyu0864 2011-08-29

打赏
举报

还有就是生成多选框以后,我在源码里.看不到值..能取到值吗?

pengyu0864 2011-08-29

打赏
举报

[Quote=引用 2 楼 mubeibei 的回复:]

HTML code
<!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-equi……
[/Quote]

谢谢师兄,经过测试已经成功了..请问如果我需要在输出的时候排版要怎么做才好呢?

乌镇程序员 2011-08-29

打赏
举报

<!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>

<script type="text/javascript">

var data = {};

data['schoolmates'] = ['张三', '李四'];

data['friends'] = ['王五', '麻六'];



window.onload = function() {

	document.getElementById('s').onchange = function() {

		var selectedVal = this.value;

		if (selectedVal !== 'NULL') {

			chks = document.getElementById('chks');

			chks.innerHTML = '';

			for(var i = 0; i < data[selectedVal].length; i ++) {

				var chk = document.createElement('input');

				chk.type = 'checkbox';

				chk.name = 'somename';

				chk.value = data[selectedVal][i];

				chk.id = 'chk' + i;

				chks.appendChild(chk);

				

				var label = document.createElement('label');

				label.setAttribute('for', 'chk' + i);

				label.innerHTML = data[selectedVal][i];

				chks.appendChild(label);

				

				var span = document.createElement('span');

				span.innerHTML = ' ';

				chks.appendChild(span);

			}

		}

	}

}

</script>

</head>



<body>

<select id="s">

	<option value="NULL">请选择</option>

    <option value="schoolmates">同学</option>

    <option value="friends">朋友</option>

</select>

<form>

	<div id="chks"></div>

    <input type="submit" value="提交" />

</form>

</body>

</html>

MuBeiBei 2011-08-29

打赏
举报

<!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>

<body>

<select id="sel">

	<option>--请选择--</option>

    <option value="s">同学</option>

    <option value="f">朋友</option>

</select>

<div id="d"></div>

<script type="text/javascript">

	var obj = {

		s:['张三','李四','王五'],

		f:['朋友','好朋友']	

	}

	document.getElementById('sel').onchange = function(){

		document.getElementById('d').innerHTML = '';

		var value = this[this.selectedIndex].value;

		var arr = obj[value];

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

			var checkbox = document.createElement('input');

			checkbox.type = 'checkbox';

			document.getElementById('d').appendChild(checkbox);

			document.getElementById('d').innerHTML += arr[i];

		}

	};

</script>

</body>

</html>