[英]How to enable all checkbox when one checkbox is deselected ? using javascript
My Code works when I select one checkbox , all gets disabled. 当我选中一个复选框时,所有代码都被禁用,我的代码可以正常工作。 Now i want that if i uncheck this selected checkbox, all checkbox should get enabled.
现在,我希望如果我取消选中此选中的复选框,则所有复选框都应启用。 Here is what i have tried
这是我尝试过的
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '80' onclick='return(validate())'>Q- 80. Statute of Liberty is in ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '153' onclick='return(validate())'>Q- 153. Indias Republic day is celebrated on ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '65' onclick='return(validate())'>Q- 65. Popular Language is ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '150' onclick='return(validate())'>Q- 150. Girnar is located at ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '154' onclick='return(validate())'>Q- 154. Largest Waterfall ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '152' onclick='return(validate())'>Q- 152. Asia is an ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '139' onclick='return(validate())'>Q- 139. Diamond is made up of ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '123' onclick='return(validate())'>Q- 123. Largest Desert ? </td> </tr>
JS: This javascript is when one selects the a checkbox , all gets disabled. JS:这个JavaScript是当选中一个复选框时,全部被禁用。 I want vice versa, that when one deselects the checkbox all should get enabled
反之亦然,当我取消选中复选框时,所有复选框均应启用
function validate(){
for (i=0; i<document.myForm.check1.length; i++){
if (document.myForm.check1[i].checked !=true){
document.myForm.check1[i].disabled='true';
}
}
}
<script>
function validate(element){
for (i=0; i<document.myForm.check1.length; i++){
if (!(document.myForm.check1[i].checked)){
document.myForm.check1[i].disabled=true;
}
if(!(element.checked)){
document.myForm.check1[i].disabled=false;
}
element.disabled=false;
}
}
</script>
<form name="myForm" id="myForm">
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '80' onclick='return(validate(this))'>Q- 80. Statute of Liberty is in ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '153' onclick='return(validate(this))'>Q- 153. Indias Republic day is celebrated on ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '65' onclick='return(validate(this))'>Q- 65. Popular Language is ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '150' onclick='return(validate(this))'>Q- 150. Girnar is located at ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '154' onclick='return(validate(this))'>Q- 154. Largest Waterfall ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '152' onclick='return(validate(this))'>Q- 152. Asia is an ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '139' onclick='return(validate(this))'>Q- 139. Diamond is made up of ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '123' onclick='return(validate(this))'>Q- 123. Largest Desert ? </td> </tr>
</form>
Try this 尝试这个
In the For loop's First if condition checkes whether each element is checked , It disables the elements which are not checked. 在For循环的First if条件中检查是否已检查每个元素,它将禁用未检查的元素。
In the second If condition, it checkes whether the clicked element is not checked and enables all elements.. 在第二个If条件中,它检查是否未选中clicked元素并启用所有元素。
and in the end it enables the clicked element. 最后,它启用了clicked元素。
Pretty Confusing but serves the purpose... 相当令人困惑,但达到了目的...
Several things to be mentioned: 需要提及的几件事:
onclick
to all checkboxes - it is not efficient, hard to maintain and will produce behind the scenes anonymous functions for each such declaration; onclick
添加到所有复选框-它效率不高,难以维护,并且会为每个这样的声明在后台生成匿名函数; You may attach event to parent of all checkboxes and just check the target of the event to filter out all unrelevant elements. Here is my solution for you: 这是我为您提供的解决方案:
HTML 的HTML
<form id="myForm">
<table>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '80'>Q- 80. Statute of Liberty is in ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '153'>Q- 153. Indias Republic day is celebrated on ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '65'>Q- 65. Popular Language is ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '150'>Q- 150. Girnar is located at ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '154'>Q- 154. Largest Waterfall ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '152'>Q- 152. Asia is an ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '139'>Q- 139. Diamond is made up of ? </td> </tr>
<tr> <td colspan='3'> <input type='checkbox' name='check1' value = '123'>Q- 123. Largest Desert ? </td> </tr>
</table>
</form>
JavaScript 的JavaScript
function listen(element, event, callback) {
if(element.attachEvent) { // IE
element.attachEvent('on'+event, callback);
} else { // W3C
element.addEventListener(event, callback);
}
}
var form = document.querySelector('#myForm');
listen(form, 'click', function(event){
var checkBoxes, i, checked, target;
target = event.srcElement || event.target; // IE or W3C
if(target.getAttribute('name') === 'check1') {
checkBoxes = form.querySelectorAll('input[name="check1"]');
checked = target.checked;
for(i=0;i<checkBoxes.length;i++) {
checkBoxes[i].disabled = checked && checkBoxes[i] !== target;
}
if(checked) {
// Validate and do something with result (target.value)
} else {
// Reset validation and result
}
}
});
Here is a working example: http://jsbin.com/iKiNenA/10/edit 这是一个工作示例: http : //jsbin.com/iKiNenA/10/edit
Note: You should place the <script>...</script>
after the <form>...</form>
in order to be sure that it runs after form DOM is loaded. 注意:应该将
<script>...</script>
放在<form>...</form>
,以确保它在加载表单DOM后运行。 Otherwise wrap the code with document.onload = funciton() { ... }
否则,将代码包装为
document.onload = funciton() { ... }
With jQuery you can reduce your javascript code just to this: 使用jQuery,您可以将javascript代码简化为:
$(function() {
$('#myForm').on('click', 'input[name="check1"]', function(event) {
$('#myForm input[name="check1"]').prop('disabled', event.target.checked);
event.target.disabled = false;
if(event.target.checked) {
// Validate and do something with result (event.target.value)
} else {
// Reset validation and result
}
});
});
Example: http://jsbin.com/iKiNenA/9/edit 示例: http : //jsbin.com/iKiNenA/9/edit
Tested on IE8+, FF, Safari, Chrome (on Mac and Windows) 在IE8 +,FF,Safari,Chrome(在Mac和Windows上)上进行了测试
If you insist to use javascript instead of jQuery as this could be very simple in jQuery, please check here : 如果您坚持使用JavaScript而不是jQuery,因为这在jQuery中可能非常简单,请检查此处:
http://jsfiddle.net/CYLmn/18/ http://jsfiddle.net/CYLmn/18/
function validate(thisobj){
if(thisobj.checked==true){
for (i=0; i<document.myForm.check1.length; i++){
if (document.myForm.check1[i].checked !=true){
document.myForm.check1[i].disabled='true';
}
}
} else {
for (i=0; i<document.myForm.check1.length; i++){
document.myForm.check1[i].disabled='';
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.