Js implementation checkbox select and unselect examples
- 2020-03-30 02:46:27
- OfStack
Check boxes to select all examples
<input type="checkbox" name="selectall" value=on onclick="selectAll()">
function selectAll(form) {
var obj = document.getElementsByName('selectall');
var cks = document.getElementsByTagName("input");
var ckslen = cks.length;
for(var i=0;i<ckslen-1;i++) {
if(cks[i].type == 'checkbox') {
cks[i].checked = obj[0].checked;
}
}
}
Check box all or none of the examples
<html>
<head>
<script>
function selectAll(){
var checklist = document.getElementsByName ("selected");
if(document.getElementById("controlAll").checked)
{
for(var i=0;i<checklist.length;i++)
{
checklist[i].checked = 1;
}
}else{
for(var j=0;j<checklist.length;j++)
{
checklist[j].checked = 0;
}
}
}
</script>
</head>
<body>
<form>
<input onclick="selectAll()" type="checkbox" name="controlAll" style="controlAll" id="controlAll"/> Future generations <br>
1:<input type="checkbox" name="selected" value="1"/><br>
2:<input type="checkbox" name="selected" value="2"/><br>
3:<input type="checkbox" name="selected" value="3"/><br>
4:<input type="checkbox" name="selected" value="4"/><br>
5:<input type="checkbox" name="selected" value="5"/><br>
6:<input type="checkbox" name="selected" value="6"/><br>
</form>
<p>
js Key event description <br>
onClick The event <br>
The mouse click event is one of the most common events when a user clicks a mouse button. At the same time onClick The specified event handler or code will be invoked for execution. <br>
Document describing <br>
The first 11 Use the onClick Event prompts a warning dialog box. <br>
onChange The event <br>
onChange An event is what happens when the contents of a text box change. <br>
Document describing <br>
The first 11 Use the onChange Event, a warning dialog box pops up when the text box content changes. <br>
onSelect The event <br>
onSelect An event is what happens when the contents of the text box are selected. <br>
Document describing <br>
The first 11 Use the onSelect Event, the result of the warning dialog when the content in the text box is selected. <br>
onFocus The event <br>
onFocus An event is what happens when the cursor lands in a text box. <br>
Document describing <br>
The first 12 Use the Onfocus Event, automatically triggered when the second text box is selected with the mouse Onfocus Event, a dialog box pops up. <br>
onLload The event <br>
onload An event is an event that occurs when the current page is displayed. <br>
Document describing <br>
The first 9 Use the OnLoad Event, which automatically opens a warning box when a web page is opened. <br>
onUnload The event <br>
onUnload Events are events that occur when the current web page is closed. <br>
Document describing <br>
The first 9 Use the onUnload Event, which automatically opens a warning box when the page is closed. <br>
onBlur The event <br>
onBlur An event is what happens when the cursor leaves the textbox. <br>
15 <br>
Document describing <br>
The first 12 Use the onBlur Event that is triggered automatically when the mouse moves away from the second text box onBlur Event, a dialog box pops up. <br>
onMouseover The event <br>
onMouseover An event is an event that happens when the mouse moves over a page element. ,,, <br>
Document describing <br>
The first 10 Use the onMouseover Event, triggered automatically when the mouse is pointing at the scroll text onMouseover Events. <br>
onMouseout The event <br>
onmouseout Events are events that occur when the mouse moves away from the top of a page element. Document describing <br>
The first 10 Use the onmouseout Event, triggered automatically when the mouse moves away from scrolling text onmouseout Events. <br>
onDbclick The event <br>
Occurs when the mouse button is double-clicked ondbclick Events. At the same time ondbclick The specified event handler or code will be invoked for execution. <br>
Document describing <br>
The first 11 Use the ondbclick Event prompts a warning dialog box. <br>
</p>
</body>
</html>