感谢您的帮助,祝您有美好的一天!
添加一个类的所有复选框:
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'>
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'>
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'>
<input class="the_checkbox" id='{unique_id}' name='module[]' type='checkbox' value='{unqiue_value}'>
然后使用jquery一次更新所有的复选框:
<script>
$(document).ready(function(){
$(".selectAll").click(function() {
if($(".selectAll").attr("checked")) {
$(".the_checkbox:checkbox").attr("disabled", true);
} else {
$(".the_checkbox:checkbox").removeAttr("disabled");
}
});
});
</script>
UPDATE:更改使用的答案。用于更新复选框而不是ID的类名,以便该ID可以保持唯一并符合HTML标准。
感谢您的回答! 但是复选框不能有相同的ID,它不起作用。 我会尽量使用jQuery,这可能会帮助我。 我也会清理我的代码并发布。 – 2011-04-19 14:33:32
我不确定你的意思是“它不工作”与所有相同的ID。还有什么你正在做的与身份证,要求他们都不一样?如果没有,它会起作用。我已经测试过,所以我知道它可以使用所有相同的ID。按照我上面的例子。给复选框禁用所有其他复选框的类的selectAll(class =“selectAll”),并给予需要禁用cpt2(id =“cpt2”)ID的复选框,并使用我发布的jQuery代码,它将工作。 – 2011-04-19 15:06:42
我真的会反对这个建议。根据HTML规范,ids必须是唯一的。虽然是的,但JQuery仍然可以工作,document.getElementById()不会。如果你想学习JavaScript并从JQuery中解脱出来,你需要document.getElementById()。 – 2011-04-19 15:10:11
ID不允许以数字开头,必须以字母开头。所以document.getElementById(1234)
将失败(我认为IE可能不会说出任何东西并允许它,但FF不起作用)。只要在号码前加一个字母并将getElementById更改为document.getElementById('cb'+id2);
即可。
此外,只是一个方面说明,如果您通过this
函数onClick
,该参数是对被单击元素的引用。所以没有必要得到box.id
,然后做document.getElementById(checkId)
。从技术上说document.getElementById(checkId)
是=== box
所以你可以只说box.checked
。
http://www.w3.org/TR/html4/types.html#h-6.2。这是关于ID属性命名要求的规范:
ID和名称标记必须以字母([A-Za-z])开头,后面可以跟随任意数量的字母,数字([0 -9]),连字符(“ - ”),下划线(“_”),冒号(“:”)和句点(“。”)。
编辑:
甚至比使用document.getElementById()
选择每个复选框,是使用document.getElementById()
父元素所需的复选框以禁用共享(如它们在表)然后使用document.getElementsByTagName('input')
获取所有复选框的集合,并使用该复选框进行循环/禁用。所以JS代码禁用会是什么样子:
一些表:
<input type='checkbox' onClick='checkCBs(this,"someTable1");'>
<table id='someTable1'>
<tr>
<td>This is checkbox 1:</td>
<td><input type='checkbox' name='group1' value='checkbox1'></td>
</tr>
<tr>
<td>This is checkbox 2:</td>
<td><input type='checkbox' name='group1' value='checkbox2'></td>
</tr>
</table>
代码:
function checkCBs(box, parent){
var parent = document.getElementById(parent),
CBs = parent.getElementsByTagName('input'),
i;
//loop through all input elements
for(i=0;i<CBs.length;i++){
//make sure the input is a checkbox
if(CBs[i].type && CBs[i].type=='checkbox'){
//set disabled on this checkbox to opposite
//of whether box is checked.
CBs[i].disabled = !box.checked;
}
}
}
这似乎是一个优雅的解决方案的开始。无论如何消除for循环?如果不是这样,至少为了获得更好的性能(虽然它可能很小),CBs.length应该是for循环之前的set var,所以您不必为循环中的每个迭代调用“length”函数。 – 2011-04-19 16:45:09
是正确的,CBs.length应该在循环之前设置,我只是懒惰。至于'for'循环,它是必需的。 DOM中没有一种方法可以影响集合/对象/数组中的多个元素,而无需循环它们并影响每个单独的值。即使在JQuery中,您也可以使用一个函数调用来调用它,但它仍然会遍历这些元素并分别影响每个元素。你可以写一个函数来为你做(与使用jQuery相同),但可能没有什么好处。 – 2011-04-19 18:00:03
感谢您的帮助乔纳森,cdburgess和afuzzyllama,我会尝试乔纳森的解决方案来解决我的问题! parent.getElementsByTagName似乎是一个很好的方法来做到这一点。谢谢 ! – 2011-04-20 07:14:30
粘贴在这里,而不是外部源代码。并且记住要清除它的语法,因为没有人喜欢读杂乱的代码。 – hsz 2011-04-19 14:10:19
请清理您的代码 – jimy 2011-04-19 14:19:39