[Label] Translation [JavaScript] How to manipulate radio and check boxes using JavaScript

Radio and check boxes are part of the form form, allowing users to select them with a simple mouse click. When compared to the general JavaScript manipulation of <textarea> elements, the JavaScript manipulation of these form controls can be said to be quite different.

The difference between a radio (radio box) and a check box (checkbox)

Before we begin, it is important to make sure that everyone knows the difference between radio and check box, that you can only select one radio in a group of radio, however, for check boxes, multiple selections are allowed. For example, in a gender selection, using radio is the most appropriate, rather than using a check box.

How to access a Radio/check box via JavaScript?

What does JavaScript do to visit a radio and a checkbox? In fact, you can use any other form element by their name.

Whether a radio or a checkbox is no different for JavaScript, the following code defines a radio box named "Test" and accesses it using JavaScript.

<formname= "Example"> <inputtype= "Radio"name= "Test" /></form><Scripttype= "Text/javascript">//access the button called "Test"document.example.test;</Script>

How do I use JavaScript to change a radio/checkbox selection state?

If we cannot change the state of the selection box, it is useless to access a selection box by itself (Radio or checkbox).

There are two states of a selection box-when "on" is selected, and "off", when not selected, this state is represented by a Boolean attribute named "Checked" in JavaScript.

Using this property, we can not only determine whether a selection box is selected, but also assign a value of "true" or "false" to change its selected state. (Note: The selected state is only checked and unchecked)

Alerts whether a box is Checkedalert (document.example.test.checked);//dynamically selects a Boxdocument.example.test.checked = true;

Http://www.javascriptkit.com/javatutors/radiocheck.shtml

Combination of multiple selection boxes

We seldom see that there is only one radio or checkbox in the form form, which is used in combination.

Now, we know that the default way to access a selection box is by its name (the Name property value). That being said (having said that), imagine having a combination of 50 radio buttons.

Access to them requires us to define a unique name for each button (each and every). Also, in a case where we need to use loops to traverse all the radio buttons, this means that you need to write 50 lines of code to access and fetch each of the 50 buttons. This is an unacceptable idea.

So, you say to yourself, as you often look at the sky, "there must be something better out there." Well, I hate to break the idea of you, but in real life that does not exist, it is true.

However, there is a technique in JavaScript that allows us to easily and quickly access one of the Radio/check boxes in a group, and the key is to give each selection box the same name. By doing this, JavaScript uses the same name to create an array of these selection boxes, and allows us to access the individual selection boxes as if we were to access the array elements.

Let's use a form form with 10 check boxes to prove the concept above.

<formname= "Example"><inputtype= "checkbox"name= "Myboxes" /><br/><inputtype= "checkbox"name= "Myboxes" /><br/><inputtype= "checkbox"name= "Myboxes" /><br/><inputtype= "checkbox"name= "Myboxes" /><br/><inputtype= "checkbox"name= "Myboxes" /><br/><inputtype= "checkbox"name= "Myboxes" /><br/><inputtype= "checkbox"name= "Myboxes" /><br/><inputtype= "checkbox"name= "Myboxes" /><br/><inputtype= "checkbox"name= "Myboxes" /><br/><inputtype= "checkbox"name= "Myboxes" /><br/></form>

In the above form, we give the same name to each of the selection boxes, so let's look at how you can easily access each selection box now:

<script type= "Text/javascript" >//access the 3rd checkboxdocument.example.myboxes[2]; // AccessThe last checkbox document.example.myboxed[9]; // access each and every one of the boxes  for (var i=0; i<document.example.myboxes.length; i++) {    //dowhatever }</script>

Yes, as we can see, by naming each checkbox as the same name, they become an array containing all the checkboxes of the same name.

How do I get a selected selection box from a combination of multiple checkboxes?

In general, a total of two methods can be used to determine which selection box is selected in the combination. Take a look at the following example:

<formname= "TV">NBC:<inputtype= "Radio"name= "Station" /><BR/>CBS:<inputtype= "Radio"name= "Station" /><BR/>ABC:<inputtype= "Radio"name= "Station" /><BR/>CNN:<inputtype= "Radio"name= "Station" /><BR/>ESPN:<inputtype= "Radio"name= "Station" /><BR/></form>

Maybe you want to choose NBC, and you want to do some action while NBC is selected, others do not perform the action. No matter what you want the script to do, the most basic thing you have to do is to have the script determine which selection box is selected. Here are two ways to help us achieve:

1) Use the For loop to iterate through the selection box array and get to the selected selection box

Call the For loop to traverse the entire data, and finally get the selected.

// A variable that'll hold the index number of the selected radio button var Theone;  for (var i=0;i<document.tv.station; i++) {iftrue= i; break; // exist for loop, as Target acquired }}

2) Use ONCLIKC in the <input> tab to get the selected selection box

 <script type= "Text/javascript" >var   Theone;  <form name= "TV" >NBC:  <input type= "Radio" Name= "Station" onclick= " Theone=0 "/><br/>cbs:  <input type=" Radio "Name=" Station "onclick=" Theone=1 "/><br/>ABC:  <input type=" Radio "Name=" Station "onclick=" theone=2 "/></br/>cnn:<input type=" Radio "Name=" station "onclikc=" theone=3 "/><br/>ESPN:  <input type= "Radio" Name= "station" onclick= "theone=4"/><br/></form></script> 

<script type= "Text/javascript" >var  Theone; <form name= "TV" >NBC:<input type= "Radio" Name= "station" onclick= "theone=0"/><br/>CBS :<input type= "Radio" Name= "station" onclick= "theone=1"/><br/>ABC:<input type= "Radio" Name= "Station" onclick= "theone=2"/></br/>cnn:<input type= "Radio" Name= "station" onclikc= "theone=3"/ ><br/>ESPN:<input type= "Radio" Name= "station" onclick= "theone=4"/><br/></form ></script>

The variable "Theone" will be set to the index value of the selection box, regardless of when the user clicks on one of the selection boxes.

In the example above, we show how to determine which selection box is selected when only one selection box is selected.

In the case of multiple selections, it is better to use the For loop to retrieve the entire array and save the selected selection box index than to use the OnClick event.

Original source: http://www.javascriptkit.com/javatutors/radiocheck3.shtml

[Label] Translation [JavaScript] How to manipulate radio and check boxes using JavaScript