选中checkbox添加到select框中的问题.

azurewrath 2002-11-17 06:18:00
想要实现如下功能:
1.页面有一组checkbox,其中一个有全选功能,另外有一个select框,一开始没有选项.
2.选中一个checkbox则select增加一选项,
即new Option(checkbox.id,checkbox.value).
把勾去掉的话,则select框中该选项也自动删除.
如果所有checkbox被选中,则"全选checkbox"自动打勾.
3."全选checkbox"的功能是:在选中所有checkbox的同时,在select框中生成对应的 一系列选项.反之,当"全选checkbox"的勾被去掉的同时,所有checkbox的勾被去掉,select框的所有选项也被删除.

现在的问题是,在点击"全选checkbox"时,select框没反应.请帮我看一下函数changeSel().

附上源文件:


<HTML>
<script>
function changeSel(id){
checkbox = document.getElementById(id);
sel = document.getElementById('buffer');
if(checkbox.checked == true ){
var o=new Option(checkbox.id,checkbox.value);
sel.add(o);
}
else{
for(i=0;i<sel.length;i++){
if(sel[i].value == checkbox.value)
sel.remove(i--);
}
}
}
function changeSelAll(){
sel = document.getElementById('buffer');
form = document.getElementById('do');
if(form.selAll.checked) {
for(i=0;i<form.length;i++) {
ifFind = new Boolean(false);
e=form.elements[i];
if(e.type=="checkbox" && e.name != "selAll" ){
for(j=0;j<sel.length;j++){
if( e.id==sel[j].id ){
ifFind = true;
break;
}
}
if(!ifFind){
var o=new Option(e.id,e.value);
sel.add(o);
}
}
}
}else{
for(i=0;i<sel.length;i++)
sel.remove(i--);
}
}
</script>

<BODY>
<form id=do >
<input type=checkbox id=id1 name=attriChecks value=value1 onclick="javascript: selOne('do');changeSel(this.id);"><br>
<input type=checkbox id=id2 name=attriChecks value=value2 onclick="javascript: selOne('do');changeSel(this.id);"><br>
<input type=checkbox id=id3 name=attriChecks value=value3 onclick="javascript: selOne('do');changeSel(this.id);"><br>
<input type=checkbox id=id4 name=attriChecks value=value4 onclick="javascript: selOne('do');changeSel(this.id);"><br>

<input type="checkbox" name="selAll" onclick="javascript: selAllItems('do');changeSelAll();">全选<br>
<select name=attriSel id=buffer size=10 multiple ></select>
</form>
</BODY>

<script>

function numChecked(f) {
form = document.getElementById(f);
j=0;
for(i=0;i< form.length;i++) {
e=form.elements[i];
if (e.type=="checkbox" && e.name != "selAll" && e.checked)
j++;
}
return j;
}

function numBoxes(f) {
form = document.getElementById(f);
j=0;
for(i=0;i< form.length;i++) {
e=form.elements[i];
if (e.type=="checkbox" && e.name != "selAll")
j++;
}
return j;
}

function selOne(f) {
form = document.getElementById(f);
if (numChecked(f) == numBoxes(f)) form.selAll.checked=true;
else form.selAll.checked=false;
}

function selAllItems(f) {
form = document.getElementById(f);
for(i=0;i< form.length;i++) {
e=form.elements[i];
if (form.selAll.checked) {
if (e.type=="checkbox" && e.name != "selAll" && !e.checked) e.checked=true;
} else {
if (e.type=="checkbox" && e.name != "selAll" && e.checked) e.checked=false;
}
}
}

function formSubmit(f) {
form = document.getElementById(f);
if (numChecked(f) == 0) {
alert("没有选项被选中!");
} else {
if (form.selAll.checked) {
if (confirm("所有选项都被选中了!\n确定提交?"))
form.submit();
} else {
if (confirm("确定提交?"))
form.submit();
}
}
}
</script>

</HTML>
...全文
78 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
emu 2002-11-18
  • 打赏
  • 举报
 回复
其实我写的是错的，没有仔细看。你既然有changeSelAll就不用改selAllItems了。不过既然这两个函数都只在同一个地方调用，为什么不只用一个呢？

此外do是保留字，不要用来做form的id。
azurewrath 2002-11-18
  • 打赏
  • 举报
 回复
to freefalcon(心宇) :
我太粗心了,呵呵,没发现这个错误 :)

to emu(ston) :
写在末尾的几个函数是通用的,还要用于其他页面.

感谢各位的指点!谢谢!
freefalcon 2002-11-17
  • 打赏
  • 举报
 回复
那是因为你还有一处地方写错了，changeSelAll()函数中的if( e.id==sel[j].id )应为if( e.id==sel[j].text)
select中显示出来的是text属性，另一个用于传值的是value属性，而不是id
azurewrath 2002-11-17
  • 打赏
  • 举报
 回复
to freefalcon(心宇) :
我写的最初版本就是ifFind = false;也不行,你试试先勾上一个checkbox,再勾"全选",看看select框发生了什么.
潇洒 2002-11-17
  • 打赏
  • 举报
 回复
哦.. addIteam 里的那个判断可以不要...因为obj.name 根本不可能等于
selAll . :)

if(obj.name!="selAll"){ .... }
潇洒 2002-11-17
  • 打赏
  • 举报
 回复
呵呵..觉得你的问题很有趣... 所以我也花了点时间写了一个.
代码比较烂.. 各位高手莫笑. ^_^

<BODY>
<form id=dof >
<input type=checkbox id=id1 name=attriChecks value=value1 ><br>
<input type=checkbox id=id2 name=attriChecks value=value2 ><br>
<input type=checkbox id=id3 name=attriChecks value=value3 ><br>
<input type=checkbox id=id4 name=attriChecks value=value4 ><br>

<input type="checkbox" name="selAll">全选<br>
<select name=attriSel id=buffer size=10 multiple ></select>
</form>
</BODY>

<script>
var form=document.all.dof,sel=form.buffer,cks=form.attriChecks;

for(i=0;i<form.length;i++){
if(form[i].type=='checkbox'){
form[i].onclick=function (){addItem(this)};
if(form[i].name=="selAll") form[i].onclick=function (){selAll(this)};
}
}

function addItem(obj){
if(obj.name!="selAll"){
if(obj.checked){
sel.add(new Option(obj.id,obj.value));
}else{
for(i=0;i<sel.length;i++){if(sel[i].value == obj.value) sel.remove(i--);
}
}
}
var cCount=0;
for(i=0;i<cks.length;i++){
(cks[i].checked)?cCount++:cCount=0;
}
form.selAll.checked=(cCount==cks.length)?true:false;
}

function selAll(obj){
for(i=0;i<cks.length;i++)
if(obj.checked){
if(!cks[i].checked) cks[i].checked=true,sel.add(new Option(cks[i].id,cks[i].value));;
}else{
cks[i].checked=false;
sel.length=0;
}

}
</script>
freefalcon 2002-11-17
  • 打赏
  • 举报
 回复
将你的ifFind = new Boolean(false);改为
ifFind = false;
azurewrath 2002-11-17
  • 打赏
  • 举报
 回复
to net_lover(孟子E章):
好像不对吧

to emu(ston) :
你的方法是正确的,但我不明白为什么我写的 changeSelAll()不起作用
emu 2002-11-17
  • 打赏
  • 举报
 回复
function selAllItems(f) {
form = document.getElementById(f);
for(i=0;i< form.length;i++) {
e=form.elements[i];
if (form.selAll.checked) {
if (e.type=="checkbox" && e.name != "selAll" && !e.checked) {
e.checked=true;changeSel(e.id);
}
} else {
if (e.type=="checkbox" && e.name != "selAll" && e.checked) e.checked=false;
}
}
}
emu 2002-11-17
  • 打赏
  • 举报
 回复
if (e.type=="checkbox" && e.name != "selAll" && !e.checked) e.checked=true; 不会触发click事件。
孟子E章 2002-11-17
  • 打赏
  • 举报
 回复
if(ifFind){
var o=new Option(e.id,e.value);
sel.add(o);
}

即可
浅谈jquery设置和获得checkbox选中的问题
1. 设置checkbox选中： //选中多选框 checkbox=$(#agentinfo input[name='veri[]']); //循环多选框中的值 checkbox.each(function(){ for(var j=0;j<data.veri.length;j++){ //判断当前值是否在数组中 if($(this).val() == data.veri[j]){ $(this).attr('checked','checked');//选中 } } }); 2. 通过点击修改checkbox的选中项 3. 获得checkbox
select、checkbox的值丢失或改变 || 根据后端返回值来确定select、checkbox的选中状态 || 使用JS改变select的选中状态
问题描述 在具体业务中，多次遇到以下问题：在一个查询页面中，原本选中了select框中的某个值，进行查询后（发生了页面跳转，跳转到原本的查询页面）select变为默认值；原本选中了的checkbox在查询后变成了未选中。 用后端返回值来确定checkbox、select的状态，直接用select的option中的selected属性或checkbox的checked属性接收返回值无效。 问题原因 这个问题的原因是查询时发生了页面跳转（原页面→后端→原页面），实际上相当于原页面被刷新了，所以checkbox和
radio,checkBox,select选中框
radio,checkBox,select选中框的使用和区别
checkbox v-model = true 但没选中
最近做了一个穿梭框的功能，左边的数据可以添加到右面，右面的数据可以添加到左面 出现点击左面的数据单个添加到右面的时候，选中的元素的下一下checkbox的选中效果受选中元素的影响，即使已经移到右面（当然v-model对应值已经动态改变） 1. (1)通过添加checkbox change事件 (2).e.target.checked = true(右面相反设置为false) ...
jQuery让checkbox框选中，查看checkbox是否已选中的状态
1.jQuery选中checkbox框 $("#xxxx").attr("checked", true); //xxxx是checkbox框的id；true是选中，如果想取消选中就写false 2.查看checkbox的状态是否已选中 $("#xxxx").is(':checked') //xxxx是checkbox框的id，如果checkbox框已选中，则返回true，否则返回false ...
JavaScript

87,778

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章