selection multiple radio button by java script using button id - javascript

all the radio button names are to be same. so i want to call using their using id. is it valid to call them by id? if it is please help me about it.
function selectAll( prefix, set ) {
var form = document.forms[0], //Get the appropriate form
i = 0,
radio;
while( radio = form[prefix + ++i] ) //Loop through all named radio# elements
for( var j = 0; j < radio.length; j++ ) //Loop through each set of named radio buttons
if( radio[j].value == (set ? "yes" : "no") ) //Selector based on value of set
radio[j].checked = true; //Check that radio button!
while($row=mysqli_fetch_assoc($result))
{
echo"<tr><td>{$row['roll']}</td>
</td><td></td><td></td><td></td><td>
<td><input id='file' type='radio' name='radio[$i]' value='Yes'>YES</td>
</td><td></td><td></td><td>
<td><input type='radio' name='radio[$i]' value='No'>NO</td></tr>";
$i++;
}

Try something like this: give each "Yes" radio button unique id, loop through them and set checked property to true:
`function selectAll()
{
for(i = 1; i < 10; i++)
{
var id = "file" + i;
var element = document.getElementById(id);
element.checked = true;
}
}`
And your php code:
`echo "<tr><td>$row</td>
</td><td></td><td></td><td></td><td>
<td><input type='radio' name='radio$i' id='file$i' value='Yes'>YES</td>
</td><td></td><td></td><td>
<td><input type='radio' name='radio$i' value='No'>NO</td>`</tr>";`
Of course as others suggested the best/quicekst is to use jquery.

If your Main focus is to select all the radio button you can give a class name for the radio button and make it get checked on button click event.

we will sugesst to use jquery instead of javascript.
You just have to include one jquery library and can jquery code at any place of your javascript code.
As jquery is advanced form of javascript and is easy to use. so all the task will better perform in jquery by selecting simply radio button class and than checked them.

<div id="radioList">
<input type="radio" class="check" />
<input type="radio" class="check" />
<input type="radio" class="check" />
<input type="radio" class="check" />
<input type="radio" class="check" />
</div>
below jquery wll help
$('.check').prop("checked", true)
or
$('#radioList input:radio').prop("checked", true)

Related

How would I .click this button?

I'm trying to press this button, this is the information from the inspect
<form action="?p=casino" method="post">
<input type="hidden" name="game" value="6">
<input type="submit" value="Play" class="button">
</form>
In other button presses I could simply do
var missionButton = document.getElementById(CrimeID); //CrimeID is the ButtonID from the /crimes page/ variables at the top of this script.
missionButton.click();
CrimeID is "Form1" so I was able to just select form1 and .click but I'm not able to do that with this one because there isn't a form id or anything and it's specific to the value (I need it to be 6) that's shown in the snippit.
There are many ways to select the <input type="hidden" name="game" value="6"> tag in JavaScript (is that what you want, right?).
If you want to use vanilla (ie pure) JavaScript, without JQuery, you can do:
var inputs = document.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++) {
if(inputs[i].getAttribute('name') === 'game' && inputs[i].getAttribute('value') === '6') {
var buttonYouWant = inputs[i];
}
}
buttonYouWant.click();
However, I would advise you to use JQuery if you can, because the implementation is far easier. Please check https://jquery.com/ for more.

Finding value of a radio in a form after checked? Javascript DOM

I currently have this form, and I am trying to get the value of the radio buttons when it is checked but I continually keep on having an error, what may be the problem with the code below?
html
<form name="radioset2" id="radioset2" action="survey.html">
<fieldset>
<span class = "question"> question1 </span>
<div id = "radio1">
<label for="r_q1_id">Yes</label>
<input id="r_q1_id" type="radio" name="r_q1_name" value="yes" />
</div>
<div id = "radio2">
<label for="r_q2_id">No</label>
<input id="r_q2_id" type="radio" name="r_q1_name" value="no" />
</div>
</fieldset>
</form>
javascript
function validRadio() {
var radio_buttons = document.getElementsByName.elements['r_q1_name'];
for(var x=0; x<radio_buttons.length; x++) {
if(radio_buttons[x].checked) {
alert(radio_buttons[x].value + " button is checked");
} else {
alert(radio_buttons[x].value + " button is not checked");
}
}
return false;
}
If you are targetting modern browsers, you can simply use the :checked CSS selector with the querySelector function to get the value of the checked input. That would remove the need of looping over the inputs.
http://jsfiddle.net/4uy2V/
var val = document.querySelector('[name=r_q1_name]:checked').value;

How to detect which checkboxes are checked?

I need to use checkboxes, but there's no submit button-- it needs to have an effect on the page the user is already on, the same page that contains the checkboxes.
Essentially, I have ~10 checkbox elements. The user selects a certain number of them, then clicks a button element. When they click that element, I need to detect which checkboxes have been checked. What's the best way to do that with the shortest amount of code?
Have all your checkboxes share the same class.
var allChecked = $(".checkBoxClass:checked");
This will return a list of checked checkboxes in the class checkBoxClass. Now you can iterate each element and operate on them.
for(var i=0; i<allChecked.length; i++) {
console.log("Checkbox " + $(allChecked[i]).val().toString() + " is checked");
}
Any of these should work:
$('input:checked');
$('input:checkbox:checked');
$('input:checkbox').filter(':checked');
Try:
<input type="checkbox" id="1" value="one"/>
<input type="checkbox" id="2" value="two"/>
<input type="checkbox" id="3" value="three"/>
<input type="button" onclick="validate()" value="Check"/>
<script type="text/javascript">
function validate(){
var chkArr = document.querySelectorAll('input[type="checkbox"]');
var notChecked='';
for(var i=0;i<chkArr.length;i++){
if(!chkArr[i].checked)
notChecked += chkArr[i].value
}
if(notChecked.length)
alert(notChecked);
}
</script>

How to know which radio is checked from a fieldset

I have the following code:
<fieldset id="dificuldade">
<legend>Dificuldade:</legend>
<input type="radio" name="dificuldade" value="facil"> Fácil </input>
<input type="radio" name="dificuldade" value="medio"> Médio </input>
<input type="radio" name="dificuldade" value="dificil"> Difícil </input>
</fieldset>
<fieldset id="tipo">
<legend>Tipo de jogo:</legend>
<input type="radio" name="Tipodejogo" value="somar"> Somar </input>
<input type="radio" name="Tipodejogo" value="subtrair"> Subtrair </input>
<input type="radio" name="Tipodejogo" value="dividir"> Dividir </input>
<input type="radio" name="Tipodejogo" value="multiplicar"> Multiplicar </input>
</fieldset>
<input type="button" value="Começa" id="button" ></input>
</form>
and here is the jsfiddle with both the html and the js http://jsfiddle.net/3bc9m/15/ . I need to store the values of the 2 fieldset so I, depending on the values picked can generate a game, but my javascript isn't returning any of them. What is wrong? I've been told that JQuery is much easier but i can't use it.
Your code on jsFiddle seems to be working fine for the most part. The only thing was that the elements output and output2 don't exist on the page.
So this code that was supposed to display the selected values wasn't working:
document.getElementById('output').innerHTML = curr.value;
document.getElementById('output2').innerHTML = tdj.value;
The part that actually retrieves the selected values is working fine.
Just add those two elements to the page, like this:
<p>Selected Values:</p>
<div id="output"></div>
<div id="output2"></div>
An updated jsFiddle can be found here.
EDIT
If a radio button from only one of the sets is selected, the code fails. You could use this code to find the selected values instead:
document.getElementById('button').onclick = function() {
var dif = document.getElementsByName('dificuldade');
var tip = document.getElementsByName('Tipodejogo');
var difValue;
for (var i = 0; i < dif.length; i++) {
if (dif[i].type === "radio" && dif[i].checked) {
difValue = dif[i].value;
}
}
var tipValue;
for (var i = 0; i < tip.length; i++) {
if (tip[i].type === "radio" && tip[i].checked) {
tipValue = tip[i].value;
}
}
document.getElementById('output').innerHTML = difValue;
document.getElementById('output2').innerHTML = tipValue;
};​
An updated jsFiddle is here.
Consider this post that adresses the issue. It shows a few javascript methods as well as how you would use it in jQuery.
How can I check whether a radio button is selected with JavaScript?
Is there a specific reason you want to break it down by fieldset instead of directly accessing the radio buttons by name?

How to clear radio button in Javascript?

I have a radio button named "Choose" with the options yes and no. If I select any one of the options and click the button labeled "clear", I need to clear the selected option, using javascript. How can I accomplish that?
You don't need to have unique id for the elements, you can access them by their name attribute:
If you're using name="Choose", then:
With recent jQuery
$('input[name=Choose]').prop('checked',false);
With old jQuery (<1.6)
$('input[name=Choose]').attr('checked',false);
or in pure JavaScript
var ele = document.getElementsByName("Choose");
for(var i=0;i<ele.length;i++)
ele[i].checked = false;
Demo for JavaScript
If you do not intend to use jQuery, you can use simple javascript like this
document.querySelector('input[name="Choose"]:checked').checked = false;
Only benefit with this is you don't have to use loops for two radio buttons
This should work. Make sure each button has a unique ID. (Replace Choose_Yes and Choose_No with the IDs of your two radio buttons)
document.getElementById("Choose_Yes").checked = false;
document.getElementById("Choose_No").checked = false;
An example of how the radio buttons should be named:
<input type="radio" name="Choose" id="Choose_Yes" value="1" /> Yes
<input type="radio" name="Choose" id="Choose_No" value="2" /> No
An ES6 approach to clearing a group of radio buttons:
Array.from( document.querySelectorAll('input[name="group-name"]:checked'), input => input.checked = false );
Wouldn't a better alternative be to just add a third button ("neither") that will give the same result as none selected?
In my case this got the job done:
const chbx = document.getElementsByName("input_name");
for(let i=0; i < chbx.length; i++) {
chbx[i].checked = false;
}
Simple, no jQuery required:
clear
<script type="text/javascript">
function clearChecks(radioName) {
var radio = document.form1[radioName]
for(x=0;x<radio.length;x++) {
document.form1[radioName][x].checked = false
}
}
</script>
YES<input type="radio" name="group1" id="sal" value="YES" >
NO<input type="radio" name="group1" id="sal1" value="NO" >
<input type="button" onclick="document.getElementById('sal').checked=false;document.getElementById('sal1').checked=false">
if the id of the radio buttons are 'male' and 'female', value reset can be done by using jquery
$('input[id=male]').attr('checked',false);
$('input[id=female]').attr('checked',false);
Somtimes i have to remove attribute checked from inputs type="radio" :
let el = document.getElementById('your_input_id');
el.checked = false;
el.removeAttribute('checked');
<form>
<input type="radio" name="btn"> Item1
<input type="radio" name="btn"> Item2<br>
<input type="reset">
</form>
This could work..

Categories

Resources