I have the following code, mostly from How can I select all checkboxes from a form using pure JavaScript and it's just not working.
Test.html
<html>
<head>
<script>
function select(){
var inputs = document.querySelectorAll("input[type='checkbox']");
for(var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
}
</script>
</head>
<body>
<form id="myId" name="myForm">
<input type="checkbox" value="1"/> 1
<input type="checkbox" value="2"/> 2
<input type="checkbox" value="3"/> 3
<input type="button" onclick="select()" value="Select all"/>
</form>
</body>
</html>
Clicking the button does nothing. I must be doing something really wrong here but I just can't pick it out.
I have the following code, mostly from How can I select all checkboxes from a form using pure JavaScript and it's just not working.
Test.html
<html>
<head>
<script>
function select(){
var inputs = document.querySelectorAll("input[type='checkbox']");
for(var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
}
</script>
</head>
<body>
<form id="myId" name="myForm">
<input type="checkbox" value="1"/> 1
<input type="checkbox" value="2"/> 2
<input type="checkbox" value="3"/> 3
<input type="button" onclick="select()" value="Select all"/>
</form>
</body>
</html>
Clicking the button does nothing. I must be doing something really wrong here but I just can't pick it out.
Share Improve this question edited Jul 2, 2024 at 0:04 Rob Bednark 28.3k27 gold badges88 silver badges130 bronze badges asked Feb 23, 2015 at 6:04 JosephJoseph 3,95710 gold badges34 silver badges53 bronze badges 1-
2
Try changing the
onclickfunction handler name fromselect()to some different name, not conflicting with known tags...See this.. jsfiddle/t6b91d6m – Rakesh_Kumar Commented Feb 23, 2015 at 6:11
4 Answers
Reset to default 5Try this...
<html>
<head>
<script>
function test(){
var inputs = document.querySelectorAll("input[type='checkbox']");
for(var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
}
</script>
</head>
<body>
<form id="myId" name="myForm">
<input type="checkbox" value="1"/> 1
<input type="checkbox" value="2"/> 2
<input type="checkbox" value="3"/> 3
<input type="button" onclick="test()" value="Select all"/>
</form>
</body>
</html>
Rename your function from select() to something else, e.g., onclickCheckbox().
select is a native method defined on HTMLInputElement to focus selected input element.
select
Solution1: Change the name of your function.
Solution2: Try onclick="window.select()" insted of onclick="select()"
An alternative is to use jQuery:
Live Demo
HTML
<ul class="chk-container">
<li><button id="selecctall">select all</button>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item1"> This is Item 1</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item2"> This is Item 2</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item3"> This is Item 3</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item4"> This is Item 4</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item5"> This is Item 5</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item6"> This is Item 6</li>
<li><input class="checkbox2" type="checkbox" name="check[]" value="item6"> Do not select this</li>
</ul>
Jquery
$(document).ready(function() {
$('#selecctall').mouseup(function(event) { //on click
if(document.activeElement.tagName ==='BUTTON') { // check select status
$('.checkbox1').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox1"
});
}else{
$('.checkbox1').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox1"
});
}
});
});
Simpler and more efficient way