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>
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.
This question already has answers here:
jquery attr('checked','checked') works only once
(2 answers)
Closed 6 years ago.
i'm trying to do a radio button with 2 options: yes and no (is a long form), but in this piece, i need that radio called refused or accomplished be checked when the user choose yes or no, refused and accomplished buttons already are disabled, the user can't change this manually.
1 - when user choose yes: accomplished must be checked
2 - if user choose no, refused must be checked.
3 - if user change the yes to no, or no to yes option we back to the rules 1 or 2 above.
however, i'm stuck because when i change the option the radio button change only once. and nothing happens after that.
this is my code right now: https://jsfiddle.net/bw21cxo5/1/
HTML:
<div>
<label for="yes">
<input type="radio" name="radio1" value="yes" id="yes" class="option-yes">Yes
</label>
<label for="no">
<input type="radio" name="radio1" value="no" id="no" class="option-no">No
</label>
</div>
<br><br>
<div>
<label for="refused">
<input type="radio" name="radio2" id="refused" disabled> Refused
</label>
<label for="accomplished">
<input type="radio" name="radio2" id="accomplished" disabled> Accomplished
</label>
</div>
js: (jquery 2.2)
$('input[name="radio1"]').on('change', function() {
if ($(this).hasClass('option-no')) {
$('#refused').attr('checked', true);
$('#accomplished').attr('checked', false);
} else {
$('#accomplished').attr('checked', true);
$('#refused').attr('checked', false);
}
});
You can associate the checkboxes with each other. Something like this using the data attribute would work:
Updated HTML
<label for="yes">
<input type="radio" name="radio1" value="yes" id="yes" class="option-yes" data-partner="accomplished">Yes
</label>
<label for="no">
<input type="radio" name="radio1" value="no" id="no" class="option-no" data-partner="refused">No
</label>
JavaScript
$('input[name="radio1"]').on('change', function() {
$('input[name="radio2]').prop('checked',false);
$('#'+$(this).data('partner')).prop('checked',true);
});
JS Fiddle: https://jsfiddle.net/igor_9000/bw21cxo5/3/
Hope that helps!
Your code works enough, only a little fix:
$(function () {
$('input[name="radio1"]').on('change', function() {
if ($(this).hasClass('option-no')) {
$('#refused').prop('checked', true);
} else {
$('#accomplished').prop('checked', true);
}
});
});
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<div>
<label for="yes">
<input type="radio" name="radio1" value="yes" id="yes" class="option-yes">Yes
</label>
<label for="no">
<input type="radio" name="radio1" value="no" id="no" class="option-no">No
</label>
</div>
<br><br>
<div>
<label for="refused">
<input type="radio" name="radio2" id="refused" disabled> Refused
</label>
<label for="accomplished">
<input type="radio" name="radio2" id="accomplished" disabled> Accomplished
</label>
</div>
It's better to use plain JS when checking radio buttons.
Try this:
$('input[name="radio1"]').on('change', function() {
if ($(this).hasClass('option-no')) {
$('#refused').get(0).checked = true;
} else {
$('#accomplished').get(0).checked = true;
}
});
The problem with your code is instead of attr you should have used prop. Here is the difference between them.
Demo
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>
Is it possible to write a Javascript function to delete a drop down when it is blank?
<form name="myform" method="post" enctype="multipart/form-data" action="" id="myform">
<div>
<label id="question1">1) Draw recognizable shapes</label>
<br />
<input type="radio" value="Yes" id="question1_0" name="question1_0" />
Yes
<input type="radio" value="No" id="question1_1" name="question1_1" />
No
</div>
<div>
<label id="question2">2) Competently cut paper </label>
<br />
<input type="radio" value="Yes" id="question2_0" name="question2_0" />
Yes
<input type="radio" value="No" id="question2_1" name="question2_1" />
No
</div>
<div>
<label id="question3">3) Hold a pencil</label>
<br />
<input type="radio" value="Yes" id="question3_0" name="question3_0" />
Yes
<input type="radio" value="No" id="question3_1" name="question3_1" />
No
</div>
<input type="submit" value="Delete Drop Down" onclick="return checkanddelete"/>
</form>
If somebody does not select question 2 for example, it deletes question 2 label and the drop down.
Assuming you actually meant radio button groups (and not drop down lists) then firstly your HTML is incorrect, you need to set the name values of each group of radio buttons to be the same:
<input type="radio" value="Yes" id="question1_0" name="question1" /> Yes
<input type="radio" value="No" id="question1_1" name="question1" /> No
Then you need to loop through the list of radio buttons, if none in the group are selected then delete the parent div:
$('input[type=submit]').on('click', function() {
var radioArr = [];
$(':radio').each(function(){
var radName = this.name;
if($.inArray(radName, radioArr) < 0 && $(':radio[name='+radName+']:checked').length == 0)
{
radioArr.push(radName);
$(this).closest("div")
.remove();
}
});
return false; //to stop the form submitting for testing purposes
});
While you are there, you might want to add some <label for=""> tags around your text.
Here is a jsFiddle of the solution.
If your dropdown has an id of DropDown, and you are looking to hide the dropdon on submit click:
function checkanddelete()
{
if ( $('#question2_0.=:checked, #question2_1:checked').length )
$('#dropdown').hide() // Or $('#dropdown').remove() if you do not plan on showing it again.
return false; // if you plan on not submitting the form..
}
Optimization for use in a module for a page include adding appropriate ids and classes to the divs, which I'm assuming that in full code are there, but if you are planning on making UI adjustments I would advise against using a submit button in the mix..
I don't know, what do you mean under "dropdown menu", but here some info, that can help you.
You can set a class name for the all Objects, you want to delete. E.g.
HTML
<div>
<label class='question2' id="question2">2) Competently cut paper </label>
<br />
<input class='question2' type="radio" value="Yes" id="question2_0" name="question2_0" />
Yes
<input class='question2' type="radio" value="No" id="question2_1" name="question2_1" />
No
</div>
JS
$(".question2").remove();
As an another solution you can set an ID for the DIV Tag above all of this elements
<div id='block_to_remove'>
<label id="question2">2) Competently cut paper </label>
<br />
<input type="radio" value="Yes" id="question2_0" name="question2_0" />
Yes
<input type="radio" value="No" id="question2_1" name="question2_1" />
No
</div>
And then remove it in JS
$("#block_to_remove").remove();
I am trying to set the value of the radio button via javascript. But I am not being able to do so. What I tried to do was have 4 radio buttons one of which is already selected. If I select some other radio button and click on Refresh, default radio button should be selected.
http://jsfiddle.net/ds345/Un8XK/1/
HTML:
<fieldset data-role="controlgroup" data-type="vertical">
<input type="radio" name="radio" id="x" data-theme="a" />
<label for="x" style="color: White">X</label>
<input type="radio" name="radio" id="y" onclick="axisonoff(this)" data-theme="a" />
<label for="y" style="color: White">Y</label>
<input type="radio" name="radio" id="z" data-theme="a" />
<label for="z" >Z</label>
<input type="radio" name="radio" id="none" data-theme="a" />
<label for="none" style="color: White">None</label>
</fieldset>
<button id = "Refresh" value="Refresh">Refresh</button>
JS:
$(document).ready(function () {
$("#none").attr("checked", true).checkboxradio("refresh"); // if this line is not present initially then it works for the 1st refresh.
});
$("#Refresh").click(function(){
$("#x").attr("checked", false).checkboxradio("refresh");
$("#y").attr("checked", false).checkboxradio("refresh");
$("#z").attr("checked", false).checkboxradio("refresh");
$("#none").attr("checked", true).checkboxradio("refresh");
});
I am sure that I have missed something very small but not able to figure out why this approach is not working.
Tools used: Javascript,Jquery 1.9 and JQuery mobile 1.3
Thanks,
Deeksha
You should use prop over attr when dealing with boolean attributes.
.attr("checked", false) will add checked="false" to your element.In HTML, <input checked="false" .../> is the same as <input checked="true" .../> or simply <input checked .../> as the attribute simply needs to be present on the element for it to be active.
See this JSFiddle example.
Change your code to use .prop() instead:
$("#none").prop("checked", false)...
Here is a fixed version of your JSFiddle demo: http://jsfiddle.net/Un8XK/8/
What you have missed is that there is no need for script. Simply use a form with a reset button:
<form>
<input type="radio" name="radio" value="0" checked>0<br>
<input type="radio" name="radio" value="1">1<br>
<input type="radio" name="radio" value="2">2<br>
<input type="radio" name="radio" value="3">3<br>
<input type="reset">
</form>
If you really must use script, you can simply return the radio buttons to their default by adding a button to the form:
<input type="button" onclick="reset(this.form.radio);" value="Script reset">
and a function:
<script>
function reset(els) {
for (var i=0, iLen=els.length; i<iLen; i++) {
els[i].checked = els[i].defaultChecked;
}
}
</script>