javasscript radio button not working? - javascript

I am adding attribute for input type radio as checked="checked", in view source it shows but not reflecting in the browser.
edit
<input type="radio" name="status" value="Yes" checked="checked"/>
<input type="radio" name="status" value="No" />
When is check in firebug it shows checked="checked" as shown above, but browser still has no buttons checked.
What might be the cause??
Thanks

The checked attribute sets the default checked state, not the current state.
Set the checked DOM property to true or false instead.
document.getElementById('for_example').checked = true;

Related

Radio buttons Checked attribute is not working in JsViews

I'm trying to build a page that has a template that contains two radio buttons. I want to make default CHECKED to one of them.
<input data-link="checkboxes" type="radio" name="checkboxes" value="true">
<input data-link="checkboxes" type="radio" name="checkboxes" value="false" checked="checked" >
and in javascript initialisation
checkboxes: true
When template renders the radio buttons that have the checked property in the source HTML are not visually checked in the browser.

Only setting the "checked" value of selected radio button while removing the attribute for other buttons

I am going out of my mind and cannot seem to figure out the logic here.
I have 4 Radio buttons
(0) <input type="radio" name="radioGroup" checked="checked">
( ) <input type="radio" name="radioGroup">
( ) <input type="radio" name="radioGroup">
( ) <input type="radio" name="radioGroup">
When the user selects the second button I want the markup to perform as such:
I have 4 Radio buttons
( ) <input type="radio" name="radioGroup">
(0) <input type="radio" name="radioGroup" checked="checked">
( ) <input type="radio" name="radioGroup">
( ) <input type="radio" name="radioGroup">
I have tried various forms of click events to set the now unselected box to not have the checked attribute.
I have it so it sets the box attribute to checked but it isn't deselecting the now unchecked button
http://jsfiddle.net/Dnd2L/27/
I believe the checked attribute is used for a default value. Radio buttons are evaluated on the form submit. You may have more luck using onclick.
Example:
<input type="radio" id="rdo1" name="rdoTest" onclick="ChangeStatus();" />
<script>
function ChangeStatus()
{
$('#rdo1').prop('checked', true);
}
<script>
You handle true/false attributes differently in jquery
Among a group of radiobuttons, only one can be checked. This means you don't have to "uncheck" it manually, the browser does it for you.
If you modify the code at http://jsfiddle.net/Dnd2L/35/ and remove/comment out this line: $("input:radio").removeAttr('checked');, the buttons will show correctly which one is checked.

Is this a bug in angular? The checkbox will not reset twice

I am trying to check a radio button using another element. It works the first time but just won't work second time around I just cannot see what the problem is!
<div ng-app ng-controller="miniC">
Yes
<input type="radio" name="joint" value="yes" ng-checked="!nochecked" ng-click="" />
No
<input type="radio" name="joint" value="no" ng-checked="nochecked" ng-click="" />
<br>
<br>
check no
</div>
When I click the 'check no' anchor tag I expect the 'no' radio button to be checked. This works the first time. However second time it doesn't. To recreate do this...
1) check 'yes'
2) click link that says 'check no' (observe no checked)
3) cick 'yes'
4) click the link that says 'check no' (observe nothing happens :-[ )
The fiddle is here....
http://jsfiddle.net/5pWK2/
Is this a bug in angular?
You set nochecked to true and not set to false again. It is assigned to true forever
This is right approach:
Yes
<input type="radio" value="false" name="joint" ng-model="nochecked" />
No
<input type="radio" value="true" name="joint" ng-model="nochecked" />
check no
and set initial value in controller:
$scope.nochecked = 'true';
http://jsfiddle.net/DEhK9/2/
You should be using ng-model and assigning that to the value attribute of the radio:
Yes
<input type="radio" name="joint" value="yes" ng-model="nochecked" ng-click="" />
No
<input type="radio" name="joint" value="no" ng-model="nochecked" ng-click="" />
<br>
<br>
check no
It is not an angular bug, think about what is happening, angular is watching the value of nonchecked in the scope, and it will react whenever it value changes.
First execution, it assigns true to this value, and so it reacts and shows in the view, but following times you never reset this value, so no change in the scope, no change in the view.
Add in the click of the radio to update this value accordingly and it will work.
Regards,
PS. As other answers specify, adding ng-model, will update the scope based in the values of the radio-set.
You can use :
Yes
<input type="radio" name="joint" ng-checked="!nochecked" ng-click="nochecked=false" />
No
<input type="radio" name="joint" ng-checked="nochecked" ng-click="nochecked=true" />
<br>
<br>
check no

Javascript/HTML gray out radio list?

Is there a way I can 'gray' out an html radio list input? I know I can actually change the color.. But I want to make it so the radio button list cannot be toggled either. I also want it to 'highlight' or be toggled to a specific radio list while in this state.
So for instance with this radio list:
<input type="radio" name="group2" value="Water"> Water<br />
<input type="radio" name="group2" value="Lemonade"> Lemonade<br />
<input type="radio" name="group2" value="Juice"> Juice<br />
I want the user not to be able to click/change the radio list. And I want the radio button to be associated with the 'Juice' option.
This needs only to be compatible with Internet Explorer.
I cannot use JQuery! Please don't paste JQuery because it will not help me!
Thanks!
Simply apply the 'disabled' attribute to the elements that you want disabled and 'checked' to the default.
<input type="radio" name="group2" value="Water" disabled> Water
<input type="radio" name="group2" value="Water"> Lemonade
<input type="radio" name="group2" value="Water" checked> Juice
Just disable it with the "disabled" property.
Give it an "id" to fetch it more easily:
document.getElementById("radioButtonX").disabled = true;
(It doesn't matter how you get a reference to the DOM node of course.) You can re-enable the element by setting the property to false. When you disable it, you'll also have to set the "checked" property (to true) of whichever other button you'd like to be selected.
If you want to do it with HTML, you can use the attribute:
<input type=radio name=whatever value=xyz disabled=disabled> <!-- or just "disabled" with no value -->

how to get the value of a radio button on jsp

I'm trying to get the value of a radio button on my JSP page with
document.getElementById('rButton').value
when I press a submit type button, but the line above only returns the value the radio button started with. It does not return the actual value of it. (true/false)
How can I check the actual value of the radio Button?
I'd appreciate some help. :)
Thanks.
Radio buttons (and checkboxes) have a checked property. Their value property/attribute is the value that is sent when they are checked.
try checked instead of value.
HTML:
<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Beer" checked> Beer<br>
<input type="radio" name="group2" value="Wine"> Wine ​​​​​​​​​​​​
Javascript:
var radioBtns=document.getElementsByName("group2");
for(i=0;i<radioBtns.length; i++){
if(radioBtns[i].checked){
alert(radioBtns[i].value);
}
}​​

Categories