How do I give an unchecked checkbox value in HTML? - javascript

I'm trying to make it so that an unchecked checkbox has value while a checked checkbox has none.
<form>
<input style="visibility:hidden" type="checkbox" name="box" value="a" checked />
<input type="checkbox" name="box" value="b" checked />
</form>
Apparently at one point, this would have worked as the second check box supposedly overrode the value of the first. But now, it seems that both values are submitted.
Any ideas?

This is because you are using a checkbox, change your code to:
<form>
<input style="visibility:hidden" type="radio" name="box" value="a" checked />
<input type="radio" name="box" value="b" checked />
</form>
The input type radio accepts only one option, while the checkbox takes more than one option per group, so since the user can't remove the checked from the top one, you get both sent server side.

Related

How to force radio buttons to remain checked when checking another radio buttons field?

Hi I have two ratings fields on my page, when the first rating is checked and I check the second one, the first one is unchecked. It's not a problem in back-end because the value of the ratings is already saved but for the visitors it's a problem because the stars disappears.
Is there a way in javascript or jQuery to say : if this field is check it remains check ?
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<fieldset class="rate">
<input id="5-stars-1" type="radio" name="firstRate" value="5" />
<label for="5-stars-1">5</label>
<input id="4-stars-1" type="radio" name="firstRate" value="4" />
<label for="4-stars-1">5</label>
</fieldset>
<fieldset class="rate2">
<input id="5-stars-2" type="radio" name="secondRate" value="5" />
<label for="5-stars-2">5</label>
<input id="4-stars-2" type="radio" name="secondRate" value="4" />
<label for="4-stars-2">5</label>
</fieldset>
Do you have any idea ?
If you need more infos or more extract from my code don't mind to ask !
Alright so thanks to Rory and Sathish, the answer is really simple :
Radio are designed to be checked once at a time so I couldn't do what I wanted, instead I simply need to switch to checkboxes and the problem is solved !
Thanks again !

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.

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 -->

javasscript radio button not working?

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;

Dynamically change input id with value - input type=range

I'm making a phone gap query mobile iOS app for course evaluation at my uni. This app primary function will be a form that in it's original form uses radio buttons where each value also has a corresponding id - e.g.
<input name="q10" id="1" value="1" type="radio" />
<input name="q10" id="2" value="2" type="radio" />
<input name="q10" id="3" value="3" type="radio" />
<input name="q10" id="4" value="4" type="radio" />
<input name="q10" id="5" value="5" type="radio" />
<input name="q10" id="6" value="6" type="radio" />
But radio buttions aren't that intuitive on iOS devices so I'm using input type range instead.
This works great for changing the value between 1 and 6 but the problem is that one only specifies one id for the whole input, not one id per value.
<input type="range" name="q10" id="q10" value="0" min="0" max="6" />
Is there a way to change the id with the value? I think this should be doable through JavaScript but I lack the know-how. I also cannot change the way the database is set up (requiring both id and value) as this database belongs to the university's IT-department.
You can use the change event
<input type="range" onchange="this.id=this.value" name="q10" id="q10" value="0" min="0" max="6" />
Working example here - http://jsfiddle.net/aVHm8/
Note: I always feel uneasy about changing the ID of a DOM element .. perhaps you should investigate better options to resolve your issue
The database can't know what the id is unless you use JavaScript to send it to the server (standard form submission sends the name and the value). In which case find the bit of JS that pulls out the ID and just send the value twice instead.

Categories