Home > Web Front-end > JS Tutorial > JS implements CheckBox checkbox to select all and none function_javascript skills

JS implements CheckBox checkbox to select all and none function_javascript skills

WBOY
Release: 2016-05-16 16:00:50
Original
1453 people have browsed it

The CheckBox control is what we generally call a check box, which is usually used to turn on or off an option. This control is found within the Settings dialog box of most applications. What we see that can be checked is the CheckBox.

This control indicates whether a specific state (i.e. option) is selected (on, value 1) or cleared (off, value 0). Use this control in your application to provide the user with a "True/False" or "yes/no" choice. Because CheckBoxes work independently of each other, users can select any number of CheckBoxes at the same time to combine options.

CheckBox JS implements the function of selecting all and unselecting all. It is very simple, just insert a small js function. . .

<script language="javascript">
 function  cli(Obj)
 {
 var collid = document.getElementByIdx_x("all")
 var coll = document.getElementsByName(Obj)
 if (collid.checked){
   for(var i = 0; i < coll.length; i++)
    coll[i].checked = true;
 }else{
   for(var i = 0; i < coll.length; i++)
    coll[i].checked = false;
 }
 }
 </script>
Copy after login

Below is a set of CheckBox checkbox html code
<input name='多选项名称' type='checkbox' value='' id="all" onclick="cli('多选项名称');"> 全选
<input name='多选项名称' type='checkbox' value='' > A
<input name='多选项名称' type='checkbox' value='' > B
<input name='多选项名称' type='checkbox' value='' > C
<input name='多选项名称' type='checkbox' value='' > D
<input name='多选项名称' type='checkbox' value='' > E
<input name='多选项名称' type='checkbox' value='' > F
Copy after login

Okay, you can copy the above code, modify it and test it. . .

The above is the entire content of this article, I hope you all like it.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template