We Keep Coding

Setting radio button checked true on button click

I have a table cell that lights up when selected. There will be many buttons on the page but only one choice can be made at a time. How can I make them mutually exclusive using hidden input radio tags? (in order to handle the group later)
<td class="choice-option">
<input type="radio" name="trainChoice" id="cheese0032" >
<p>10€</p>
</td>
<td class="choice-option">
<input type="radio" name="trainChoice" id="cheese0033" >
<p>7€</p>
</td>
For the input tag I was thinking of putting an onclick event on the td like:
onclick="checked()==true;"
Also I was thinking an onclick for the and send it to a .js with a function to switch the radio button to true.
When the button is clicked the radio button doesn't toggle to true. How do I make it do that?
Any advice would help greatly, thanks in advance!

Here is an example : http://jsfiddle.net/xhhLja7m/
$(".choice-option").click(function()
{
$(this).find('input[type=radio]').prop("checked", "true");
})

The radio button isn't necessarily required to achieve this. You might apply a class name (e.g. 'selected') to a td when it is clicked and remove this class from all td's at the same time. In this way you get the effect of one td being selected at any time. In jQuery:
$('.choice-option').click(function() {
$('.selected').removeClass('selected');
$(this).addClass('selected');
}
Where you will apply your selected styles with CSS to the class of 'selected'.
Edit: However, to use the radio buttons as you would like to then you could do this:
$('.choice-option').click(function() {
$(this).find("input[name='trainChoice']").prop('checked', true);
}

How to create radiobuttons from more than one column and make one active at a time

I have two columns 'ReviewedDate' and 'Approved' . Now, I need to create 4 radiobuttons in the search form where each column will have two radiobuttons.('ReviewedDate' has 'Reviewed' and 'Not Reviewed' radiobuttons) and ('Approved' will have 'Approved' and 'Rejected' radiobuttons). Suppose if I click on any of this radiobuttons, the other three buttons should be inactive. Suppose I click on Approved, only approved radiobutton should be on and the rest three button should be off.
How can I do this.

Give the same name for all 4 radiobuttons

Try like this,
<input type="radio" name="gender" value="M" />
<input type="radio" name="gender" value="F" />

I'm not sure if your logic is correct. Let's say the document is "Reviewed", it can be furthermore "Approved" or "Rejected", if I get it correctly. On the other hand, the column "ReviewedDate" is supposed to contain a date. I would suggest a column state and a column change state date, or something...
Any ways, your problem is a html and javascript problem. Du make a radiobutton inactive you have to set the property "disabled". If you just want to uncheck all other radiobuttons once you click one, you simply have to give all of them the same name. Than your browser does the job.
Cheers,
Toni

Angularjs radio buttons

I know that this has been spoken about in some Google Threads but I still can't find the right solution to bind my radio inputs to a model (in clean'n simple manner),
Currently I have HTML:
<input ng-model="searchByRma" type="radio" name="search-type">
<input ng-model="searchByDelivery" type="radio" name="search-type">
And in Controller:
$scope.searchByRma = true;
$scope.searchByDelivery = false;
This does not work (as it would with the checkboxes)...
Any ideas on how to set the default value on the first radio button without loosing data-binding?
Thanks!

I think you should use same variable with different values in those
two radio buttons.
<input ng-model="searchBy" value="Rma" type="radio" name="search-type">
<input ng-model="searchBy" value="Delivery" type="radio" name="search-type">
Then, you should have searchBy set either "Rma" or "Delivery" depending on
user input.

What has worked for me is to set the model variable to { } and that will reset the radio buttons to their default (not selected) state. Of course, this will only work if you have your radio button tags correct as in tosh's answer.
In your case:
$scope.searchBy = { };

How do I allow to check only one checkbox out of four in UserControl?

I have created a User Control with 4 check boxes(server control). I want to allow to check only one checkbox out of four.
The user control is loaded on page dynamically.I page may have multiple same UserConrol.
How do I do it using jQuery or Javascript?

Use a Radio Button Control. Checkboxes are meant for multiple selections, whereas Radio Buttons are meant for single selections. Then with the Radio Buttons you can specify the GroupName for those controls to limit the selection to a single item.

You can give all of the checkboxes in the group the same class and do something like this to uncheck them all using JQuery, while checking or unchecking the one that was clicked:
$('.checkbox').click(function{
// save the original checked state of the one we're clicking:
var checked = $(this).attr('checked');
$('.checkbox').attr('checked', false); // uncheck all of the boxes
$(this).attr('checked', !checked); // invert the original state
});
But the better choice would probably be to use a radio button control with a "none of the above" option. That way you can do validation (did they answer the question at all?)

I think it should be: $(this).attr('checked', checked);

Had similar issue when working on cakephp. Cakephp wraps checkboxes within DIV.
My solution was clear checkboxes using each loop and then select the checkbox user ticked.
CASE:
<div class="unique"> <input type='checkbox' name='mygroup1' value='1' class=''>one</div>
<div class="unique"> <input type='checkbox' name='mygroup2' value='2' class=''>two</div>
<div class="unique"> <input type='checkbox' name='mygroup3' value='3' class=''>three</div>
$('.unique').click(function() {
$('.unique').find('input').each(function(){
$(this).attr('checked', false);
});
$(this).find('input:first').attr('checked', true);
});

Radio button on/off trigger works only one way

So this is the dumbest thing I've struggled with in awhile. I cannot get the state of a simple radio button set to toggle something on the page.
<label for="completeSw"><span>Completed?</span></label>
<input type="radio" id="completeSw" name="completeSw" value="1"/>Yes
<input type="radio" id="completeSw" name="completeSw" value="0" checked="checked"/>No<br/>
So you can see here an extremely simple yes/no radio button set to toggle an action. It needs to serve two purposes: to flag a yes/no value (1/0) in the POST data, and ideally trigger an action on the page using JS/jQuery. I'm having trouble with the latter.
The default state is "No"; if I click "Yes" I can retrieve an onchange or onclick event state and make something happen. However, this is a one-way switch; I cannot retrieve a state going back to the "No" selector once I've gone to "Yes". What I need to be able to do is show / hide an element on the page depending on what choice they've made in this radio set. If I click "Yes", I can trigger the action and see the page change. Once I click "No", however, it acts as if there was no state change and I cannot perform an action i.e. hide the element again.
I've tried variations on retrieving the "checked" state, the radio pair value, etc, e.g.
$("#completeSw").change(function(e){
alert( $(this).attr("checked") ); // only triggers when "Yes" is selected
});
Perhaps I should not be using a yes/no radio pair, but instead be using a single checkbox? Seems more user-friendly and elegant this way (radio buttons) to me.

IDs must be unique, so it will only ever find the first one on your page. Use a class instead.

Really, ID's must be unique, but you don't need 2 ID's. You'll only monitor changes in one radio. For example - "Yes" value
<label for="completeSw"><span>Completed?</span></label>
<input type="radio" id="completeSw" name="completeSw" value="1"/>Yes
<input type="radio" name="completeSw" value="0" checked="checked"/>No<br/>
And the you'll process the checked attribute of only this element. True - "Yes", False - "No"

Some browsers don't do anything when alert(message), message=null. And since an unchecked field has no checked-attribute, that could be the thing :).
Try:
alert('Checked: '+$(this).attr("checked"));

This is separate, but you're kinda using the label wrong also. The label is meant to extend the click area so someone could click on the word 'Yes' and the radio button will activate. Hopefully this helps you out a little.
<span>Completed?</span>
<input type="radio" id="completeSwYes" name="completeSw" value="1"/><label for="completeSwYes">Yes</label>
<input type="radio" id="completeSwNo" name="completeSw" value="0" checked="checked"/><label for="completeSwNo">No</label><br/>
<script type="text/javascript" charset="utf-8">
// If the radio button value is one then this evaluates to true.
var completeSW;
jQuery("input[type='radio'][name='completeSw']").change(function() {
completeSW = (jQuery(this).val() == 1);
alert("completeSW checked? " + completeSW);
});
</script>