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

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

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

外面不是有一个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')然后循环也行~·

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

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

<!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>这个宽度你根据文字调下~·

<!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个就换行~·

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

调试易

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

解决方案 »