We Keep Coding

Link duplicate radio button forms

So, I want to display a set of radio buttons several places on a page. I want the state of the radio buttons to be linked, select option A on one form should select option A in all forms.
Sorry for not including examples.
Here is the idea:
<form id="serverForm">
<input type="radio" name="#(site.SiteID)" class="serverRadio" value="All"> All
<input type="radio" name="#(site.SiteID)" class="serverRadio" value="DS1"> DS1
<input type="radio" name="#(site.SiteID)" class="serverRadio" value="DS2"> DS2
<input type="radio" name="#(site.SiteID)" class="serverRadio" value="IS1"> IS1
</form>
This form is going to be created multiple times dynamically depending on the size of the loops its contained in. I want each of these forms to essentially act as duplicated. Clicking an option on one will update all.

Give a class attribute to all Radiobuttons.
Add an "on Click" event on that class.
Check the clicked radio button's value in the event
Compare the value with other radio buttons (in a loop for all radio buttons), if it's the same put the attribute "checked" on true
P.S.: Share your code next time so an easy code example can be provided or even the full solution.

1.)Make all the position 1 buttons of forms to same div and position 2 buttons to other same div and so on.
2.)Use any technique(like directing to any function or adding an onClick event in jquery) to check the changed class like:-
$(".class_to_be_checked").attr("checked","checked");

Need to find where my radio option CHECKED value gets changed

Is there way that i could identify where a radio option value gets changed, either thru watch expression on firebug or inspect element ?
i am remote debugging a website and there are 4 radion buttons in the website. We set the CHECKED property for my 4th option as true, it gets checked. But after a sometime(1 sec) my first option gets selected automatically. There are too many javascript code involved and i am not sure where to check.
So is there any way i can do a debug-BREAK when a watch expression fires or any other way to debug this?

You can do this using jquery:
$('input[type=radio][name="inputName"]').on('change',function(){
//#myForm is the id of the form that the radio box in
alert($('input[name="inputName"]:checked', '#myForm').val());
});
This will alert the new value of the radio box when changed JsFiddle

AngularJS: Enable Button after Multiple Checkboxes as been "checked"

Lets say i have two Questions, each with their respective checkboxes and a "Next->" button. I want to enable the "Next" button, once each Question has at least one checked checkbox. I have everything wrapped around a Form. Something like this
<form name="form_" novalidate>
<div="cont_1" >
<label>
<input type="checkbox" ng-model="data1.enabled" ng-required="!data1.enabled">
</label>
.
.
</div>
<div="cont_2" >
<label>
<input type="checkbox" ng-model="data5.enabled" ng-required="!data5.enabled">
</label>
.
.
</div>
<button ng-disabled="form_.$invalid">
</form>
The problem is that I have to select ALL checkboxes for the button to enable, i dont want that, what i want is for at least one from each question to be checked for the button to enable, it can be 1 & 1, 2 & 3 etc.. but not forcefully ALL of them. Ive used the ng-required with radiobutton before and it does work. Not the same with check boxes though. It seems the $invalid is checking for all of them to comply but that is not what i want.
Thanks in advance!!!

You should not be using ng-required for checkboxes, because required for checkbox means that it has to be selected to be valid. So if you have some checkbox in the form that is required then is has to be checked to have the form being valid.
It works differently for radio buttons. required on radio buttons enforces selection of atleast one value.
Check this
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_checkbox_required
You should maintain for each question something like a flag which could be set on selecting an answer for that question, and enable the button if these flags for all the questions are set.
ng-required is not the way to go about it.

I agree with Nils - you are hoping to get something out of ng-required that it was not meant to do.
You need to either:
implement logic in some QuestionService that determines how many
checked answers constitutes an answered question, and drive your
view off of that logic, or
create a directive that monitors the checkboxes among its children.
For approach (1) I created a plunker: http://plnkr.co/edit/pON3PmS77oqqe0aj4Fsb

Need to check all radio boxes on a page using javascript

I need to use javascript to check all radio boxes with a certain ID on a page. The radio buttons all have different names, and are grouped by 3, one for approve, one for deny, one for review...
<input type=radio name='21' value='approved' id='approved' title='Approve'>
<input type=radio name='21' value='denied' id='denied' title='Deny'>
<input type=radio name='21' value='review' id='review' checked title='Do nothing right now'>
...and so on. I've searched on this site and all over the googles, not really finding a solution that works for me. I have another set of radio buttons on top of the page, that I want to use to control the others, so if I click the "approve" radio up top, all the approve radios are selected, deny does all the denied radio boxes on the page etc.
I am using an onclick on the top radio buttonset to fire a javascript function, but I've no idea what to tell the function to do. I assume that jquery would be able to do this nicely, but cannot seem to come up with the code to do so.

Try a click function on all radio and update the selection based on its value. See below,
// v--- Refined the selector as you want this to happen only when clicking on the
// controller radio options.
$('.controller:radio').click(function () {
$(':radio[value=' + this.value + ']')).prop('checked', true);
});
DEMO: http://jsfiddle.net/KvdNq/

What I would do is actually create the groups within separate DIVS. Then you can loop through all the radios within that particular div and dont need to care about what the IDS are for the respective Radio Buttons.
<div id="group1">
<input type="checkbox" value="group1"/> Check all in this group
<input type = "radio" value="xx" />
<input type="radio" value="yy" />
</div>
Now you can simply create a function that takes the value of the checkbox, then loops through the matching div, checking all the RADIO BUTTONS within it. Make sense?

Toggle Visibility in JQuery

I can do this in JS, but I'm beginning to use JQuery and would prefer to develop skills for that.
I have a reminder message [#CheckboxReminder] "Tick this checkbox to indicate you have checked your data".
I then want to hide the reminder message when the checkbox [#IsConfirmed] is ticked, and restore it to original state if it is then unchecked.
The page will be rendered with the reminder message set to a class of either Visible or Hidden; if the user has recently marked their data as "checked" the message will be hidden (but user is welcome to check the box again if they wish)
I believe that JQuery toggle() can do this, but I read that it depends on the way that the #CheckboxReminder style is set to indicate visibility, and I have also read that Toggle() could get out of sync with #IsConfirmed CheckBox - e.g. rapid double clicking. Maybe I should have toggle(FunctionA, FunctioB) and have FunctionA set the checkbox state, and FunctionB unset it - rather than allowing the Click to set it?
What's the best way to code this please?
In case useful here's an example of what the HTML might look like:
<p>When the data above is correct please confirm
<input type="checkbox" id="IsConfirmed" name="IsConfirmed">
and then review the data below</p>
...
<ul>
<li id="CheckboxReminder" class="InitHide OR InitShow">If the contact details
above are correct please make sure that the CheckBox is ticked</li>
<li>Enter any comment / message in the box above</li>
<li>Then press <input type="submit"></li></ul>

Just check if the checkbox has indeed changed value before showing/hiding the message.
$('#isConfirmed').click(
function(){
if ( $(this).is(':checked') )
$('#CheckboxReminder').show();
else
$('#CheckboxReminder').hide();
}
);
The above will fire each time the checkbox is clicked, but since we first check if the checkbox is indeed checked or not it will avoid false positives.