Home  >  Article  >  Web Front-end  >  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
WBOYOriginal
2016-05-16 16:00:501420browse

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>

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

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.

Statement:
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