fiddle : http://fiddle.jshell.net/12dkswgd/
I'm trying to choose a gender by elem 'input.radio'
So I made some if sentences, but it's not working.
I don't know why.
Belows are codes that I made. it's not working.
You can see more easier at fiddle : http://fiddle.jshell.net/12dkswgd/
html :
male<input type="radio" id="a"></input>
<br/>
female<input type="radio" id="b"></input>
js :
/* these sentences are not working
a = document.getElementById('a');
b = document.getElementById('b');
if(a.checked) {b.checked = false}
if(b.checked) {a.checked = false}
*/
/* these sentences are not working, either.
if(document.getElementById('a').checked) {
document.getElementById('b').checked = false
} else if(document.getElementById('b').checked) {
document.getElementById('a').checked = false
}
*/
/* this sentence is working. */
document.getElementById('a').checked = true;
Update 1: using onchange handler - check fiddle
If you want to get it done using JavaScript then one way is like this fiddle:
Note: The problem with your JavaScript code was: you were not wrapping the JavaScript code inside any function ( so your code used to run only once ) and you need to handle the radio button click using a handler ( in fiddle its changeRadio('button') and with bit more logic)
but as other people have suggested I would prefer HTML way which is more cleaner and simpler :
Male: <input type="radio" name="gender" value="male" />
Female: <input type="radio" name="gender" value="female" />
Simplest case scenario, you shouldn't really require JavaScript to do the toggle if the "name" attribute of the checkboxes are the same.
<label>Male<input type="radio" id="a" name="gender"/></label>
<label>female<input type="radio" id="b" name="gender"/></label>
notice that i wrapped the checkboxes with label so that the text would be clickable as well.
<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />
And dont use javascript, Luke.
You don't need js for this. Just set same name on both radios:
mail<input type="radio" name="test" id="a" />
<br/>
femail<input type="radio" name="test" id="b" />
fiddle
You need js for this only if you use this radio in an asp repeater.
change your html to this:
male<input type="radio" name="a" id="a"/>
<br/>
female<input type="radio" name="a" id="b"/>
Related
I would like to unselect a radio button when I click on the label and the following code only works as expected if I click on the button itself.
How to link the behaviour of the label to the button?
<label>
<input type="radio" name="choice" value="HTML" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false" /> Learn HTML
</label>
<label>
<input type="radio" name="choice" value="Java" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false"/> Learn JavaScript
</label>
Radio buttons don't work like you are thinking they do. To deselect one you need to either select another with the same name attribute or reset the form. The functionality that you are describing fits more with a checkbox than a radio button. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio for the specs. You may also want to take a look at this question/answer: Reset Particular Input Element in a HTML Form.
Also, there is no need to wrap your label tag around the input. The for attribute takes care of the linking.
If you want to de-select a radio button, you will need to reset the form.
form {
display: flex;
flex-direction: column;
}
<form>
<label for="ckb-01">
<input id="ckb-01" type="radio" name="choice" value="HTML" />
Learn HTML
</label>
<label for="ckb-02">
<input id="ckb-02" type="radio" name="choice" value="Java" />
Learn JavaScript
</label>
<label for="ckb-03">
<input id="ckb-03" type="radio" name="choice" value="Java" />
Learn CSS
</label>
<input type="reset" />
</form>
use the attribut for in the label
<label for='idHTML'>Learn HTML </label>
give the radio the id equivalent
<input id='idHTML' type="radio" name="choice" />
what do you mean by this.__chk
onMouseDown="this.__chk = this.checked"
onClick="if (this.__chk) this.checked = false"
if you wanna select just one you could use simply type radio with group the options with one name='choice'
if you want check and uncheck multiple choices you could use checkbox
After many attempts I finally managed to code a working solution with some javascript.
The problem is that as soon as the radio button is clicked its state changes. the previous value needs to be stored in order to know if it has to be unselected or not.
<main id="form">
<label >
<input type="radio" name="rad" id="Radio0" />Learn Html
</label>
<br><br>
<label>
<input type="radio" name="rad" id="Radio1" />Learn CSS
</label>
<br><br>
<label>
<input type="radio" name="rad" id="Radio2" />Learn Java
</label>
</main>
<script>
let buttons = document.querySelectorAll('#form input');
for (button of buttons){
button.dataset.waschecked="false";
button.addEventListener('click', myFunction, false);
}
function myFunction(e) {
if (e.originalTarget.dataset.waschecked == "false"){
for (button of document.querySelectorAll('#form input')){
button.dataset.waschecked = "false";
}
e.originalTarget.dataset.waschecked = "true";
e.originalTarget.checked =true;
}else {
for (button of document.querySelectorAll('#form input')){
button.dataset.waschecked = "false";
}
e.originalTarget.checked =false;
}
}
</script>
Any suggestion to improve this code is welcome.
I was previously helped to get a javscript function using jquery working - see :
JS Fiddle working example
$("[name='COLUMN35']").on('change', function() {
var val = $(this).val();
var reverseVal = (val == 'Yes' ? 'No' : 'Yes')
$("input[value='" + reverseVal + "']:not([name='COLUMN35'])").prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Option 1</span><br />
<form>
<label><input type="radio" name="option1" id="option1Yes" value="Yes">Yes</label>
<label><input type="radio" name="option1" id="option1No" value="No">No</label>
<br /><br />
<span>Option 2</span><br />
<label><input type="radio" name="option2" id="option2Yes" value="Yes">Yes
</label>
<label><input type="radio" name="option2" id="option2No" value="No">No</label>
<hr />
<span>Unsubscribe from all</span><br />
<label><input type="radio" name="COLUMN35" id="unsubYes" value="Yes">Yes</label>
<label><input type="radio" name="COLUMN35" id="unsubNo" value="No">No</label>
<br /><br />
<input type="submit" value="submit">
</form>
Upon implmenting that same code into the generated form page i am not sure why it does not work - see:
Webform with code not working
Unfortunately I am not able to edit the any of the form elements as they are generated automatically but hoping someone might have a different idea to implement - usually the messier the better E.G target the relevant ids to change and maybe not using jquery
try putting your code in $(document).ready(function(){})
eg
$(document).ready(function(){
$("[name='COLUMN35']").on('change', function(){
var val = $(this).val();
var reverseVal = (val == 'Yes' ? 'No' : 'Yes')
$("input[value='"+reverseVal+"']:not([name='COLUMN35'])").prop('checked', true);
});
});
I have two radio buttons. When I click on one, the other should become unchecked, and vice versa.
The code I've produced so far is not working:
<input type="radio" id="rbdemail" onclick="chekrbdclick()" checked="checked" />
<input type="radio" id="rbdsitelnk" onclick="chekrbdclick()" />
function chekrbdclick()
{
// How to manage here?
}
Simple, just use a 'name' property with the same value for both elements:
<html>
<body>
<form>
<input type="radio" name="size" value="small" checked> Small
<br>
<input type="radio" name="size" value="large"> Large
</form>
</body>
</html>
hope it helps
<form>
<label>
<input type="radio" name="size" value="small" checked> Small
</label>
<br>
<label>
<input type="radio" name="size" value="large"> Large
</label>
</form>
Give them a name attribute with common value like size, and it will work. For best practice, you can place your input tag inside a label tag, so that, even if your user clicks on the text beside the button (ie on "Small" or "Large"), the respective radio button gets selected.
The perfect answer is above answered ,but I wanna share you how it can work by javascript ,this is javascript work (not standard answer) ....
<input type="radio" id="rbdemail" onclick="chekrbdclick(0)" checked="checked" value="Small" />Small<br>
<input type="radio" id="rbdsitelnk" onclick="chekrbdclick(1)" value="Large" />Large
<script>
function chekrbdclick(n)
{
var small = document.getElementById('rbdemail');
var large = document.getElementById('rbdsitelnk');
if(n === 0){
small.checked = true;
large.checked = false;
}
else {
small.checked = false;
large.checked = true;
}
}
</script>
I'm new to jQuery.
I am trying to create a reusable function that will replace the text of a input field.
I pass in the field I want to change as one parameter and the new text as another parameter.
I figured I would try it out with some radio buttons.
HTML
<label>
<input type="radio" name="optradio" onClick="replaceText(txt_recipient, 'All')" value="0" checked>All</label>
<label>
<input type="radio" name="optradio" onClick="replaceText(txt_recipient, 'Geo')" value="1">Geographical Area</label>
<label>
<input type="radio" name="optradio" onClick="replaceText(txt_recipient, '')" value="2">Specific User</label>
<input type="text"id="txt_recipient" name="txt_recipient" value="All" />
JS
function replaceText(field, newtext) {
document.getElementById(field).text(newtext);
};
I originally toyed with the idea of
function replaceText(field, newtext) {
$(field).text(newtext);
};
but that didn't seem to work either. Help?
field is the actual element so just set the input value property.
function replaceText(field, newtext) {
field.value = newtext;
}
DEMO: http://jsfiddle.net/039v0wst/1/
with jQuery
function replaceText(field, newtext) {
$(field).val(newtext);
}
DEMO: http://jsfiddle.net/rgen7vLv/1/
First of all give unique names:
<input type="radio" name="optradio1" onClick="replaceText(txt_recipient, 'All')" value="0" checked>All</label>
Geographical Area
then js
$('input[name$="optradio1"]').val("newtext")
Can you pass the field id with ' '
E.g;
'txt_recipient' instead of 'txt_recipient
It is no longer recommended to declare event handlers inline in the HTML attributes.
Using a more modern syntax, I'd include a data attribute that specifies the text in the destination, the update your target using the string from the data attribute.
$('input[type="radio"]').change(function() {
$("#txt_recipient").val($(this).data("text"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
<input type="radio" name="optradio" data-text="All" value="0" checked>All</label>
<label>
<input type="radio" name="optradio" data-text="Geo" value="1">Geographical Area</label>
<label>
<input type="radio" name="optradio" data-text="" value="2">Specific User</label>
<input type="text"id="txt_recipient" name="txt_recipient" value="All" />
I have 3 different Radio Buttons in a page with the following code
<input type="radio" name"1" value="1">1</input>
<input type="radio" name"2" value="2">2</input>
<input type="radio" name"3" value="3">3</input>
How can I get the value of the selected radio button with different names ?
I tried
var option = $("input[type='radio'][name='1']:checked").val();
But giving Undefined. Any Idea's ?
You need to have them be the same name, otherwise they don't work as radios (they could all be selected), and you need your html to be valid:
<input type="radio" name="1" value="1">1
<input type="radio" name="1" value="2">2
<input type="radio" name="1" value="3">3
You're missing the = when assigning the name attribute.
<input type="radio" name="1" value="1" />
<!-- ^
Also, as others have pointed out in comments, input tags are self-closing. (although it does work even with invalid html)
Demo: http://jsfiddle.net/g7RT2/
You missed "=" sign after the "name" attribute, selector doesn't match name=1 condition: <input type="radio" name"1" value="1">1</input>
http://jsfiddle.net/gLgBj/
here is a working fiddle
http://jsfiddle.net/mW7mk/
your html is not well formated, the input is self closed and name="1" not name"1"
var options = $("input[type='radio'][name='1']:checked").val();
alert("test : " + options);
worked just fine with :
<label><input type="radio" name="1" value="1" checked="checked"/>1</label>
<label><input type="radio" name="2" value="2"/>2</label>
<label><input type="radio" name="3" value="3"/>3</label>