Develop Reference

Unchecked Radio Button Two Cicks

I need to check the first radio button (value = "option1") by default. But after adding "checked" attributes, the radio button with value "option2" needs two click to get checked. Any idea whats wrong here?
Based on other posts i have included the code in between form tag, i have also tried changing "checked" to 'checked="checked"', tried with different "name" attribute, removing the div around radio button.
This is my code:
HTML
<div class="action">
<div class="...">{label...}</div>
<div class="...">
<input type="radio" tabindex="0" aria-label={...} name="preview" value="option1" onclick={getPreview} checked></input>
<label>{...}</label>
</div>
<div class="...">
<input type="radio" tabindex="0" aria-label={...} name="preview" value="option2" onclick={getPreview} ></input>
<label>{...}</label>
</div>
</div>
JS
getPreview(event) {
if(event.target.value == "option1") {
...
} else {
...
}
}
But nothing seems to be working.

You input have some issues with input closing and also with your JS.
This is how you can close input element />
Also, if you are calling getPrevious on input click you can use getPrevious(this) and get the value of the onclick input like this simplified method.
Just run snippet below to see it action.
function getPreview(event) {
if (event.value == "option1") {
console.log('option 1 checked')
} else {
console.log('option 2 checked')
}
}
<div class="action">
<div class="...">{label...}</div>
<div class="...">
<input type="radio" tabindex="0" aria-label={...} name="preview" value="option1" onclick="getPreview(this)"/>
<label>{...}</label>
</div>
<div class="...">
<input type="radio" tabindex="0" aria-label={...} name="preview" value="option2" onclick="getPreview(this)" />
<label>{...}</label>
</div>
</div>

Why can't I get the status of this radio button in jquery?

I have this piece of code from a salesforce visualforce page.
<div id="testId" class="row mb25 mt15">
<div class="col-md-6 plr0">
<p class="en">Would you like to add a co-applicant?<span class="asteriskField">*</span> </p>
<p class="fr">Would you like to add a co-applicant?<span class="asteriskField">*</span> </p>
</div>
<div class="col-md-4 mt-5r">
<apex:selectRadio id="innerTestId" value="{!client.Would_you_like_to_recieve_future_promo__c}" styleClass="radio">
<div class="row">
<div class="col-sm-6">
<div class="radio pa-cus">
<apex:selectOption itemLabel="Yes" itemValue="Yes"/>
</div>
</div>
<div class="col-sm-6">
<div class="radio pa-cus">
<apex:selectOption itemLabel="No" itemValue="No"/>
</div>
</div>
</div>
</apex:selectRadio>
</div>
</div>
When the Submit button is clicked I need to have a JQuery script to check weather the radio button is selected Yes or No so that I can perform some custom validation. I call this function by adding onclick="validateInnerTestId();" to Submit button.
My problem is that I am unable to read/check whether the radio button is chosen Yes or No or True or False. If I can find out what state they are in then I can do my
Here is my goal
<script type="text/javascript">
<script>
function validateInnerTestId()
{
if(innerTestId is Selected as Yes)
{
execute fucntionX()
}
else
{
execute functionY()
}
}
<script>
Here is some examples of how I have tried to read the value of the radio button:
alert($("#innerTestId").itemValue()); this line doesn't return anything
alert($("#innerTestId").val()); this line also doesn't return anything
and this if else always return no
if ($('innerTestId').is(':checked'))
{
alert("yes");
}
else
{
alert("no");
}
Does anyone has any idea on how to check for the radio button in this case?
Thanks

As #Andrea mentioned in the comments, you simply forgot the # in your selector. There is a simple example below demonstrating the usage. If your code still isn't working we will need more info.
Are you sure validateInnerTestId() is being called?
How is it being called?
$('#doit').on('click',function() {
var str = "";
if ($('#test').is(':checked')) {
str += "Toggle checked? YES\n"
} else {
str += "Toggle checked? NO\n"
}
if ($('#option1').is(':checked')) {
str += "Option checked: 1";
} else if ($('#option2').is(':checked')) {
str += "Option checked: 2";
} else {
str += "Option checked: NONE";
}
alert(str);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="test" name="toggle" type="checkbox" value="" />
<label for="toggle">Toggle</label>
</div>
<div>
<input type="radio" id="option1" name="options" value="1">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="options" value="2">
<label for="option1">Option 2</label>
</div>
<br />
<input id="doit" type="button" name="test" value="Tell me!" />
It might also be something to do with the ASP/SalesForce implementation? Perhaps some of the answers in this question might help: How to check if an option is selected?

VF tags use dynamic ids, you should do following:
function validateInnerTestId(){
if($('#{!component.innerTestId}').is(':checked')){
execute fucntionX()
}
else{
execute functionY()
}
}

binding radio buttons to ng-model with angularjs

So this is the relevant part of my html-code. i tried binding the "formFriendsAll" scope to the ng-model.
<form ng-submit="submitForm()" >
<div class="col-sm-3">
<div class="form-group">
<label>Which Persons to show?</label>
<div class="radio">
<label>
<input type="radio" name="FriendsAll" ng-model="formFriendsAll" value="Friends" >
Friends
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="FriendsAll" ng-model="formFriendsAll" value="Alle">
All
</label>
</div>
<div>currently selected: {{formFriendsAll}}</div>
</div>
</div><td><input type="submit" class="btn btn-primary" value="Los!"/></td> </form>
This is the relevant js-code:
var challenge = angular.module('challengeApp', [])
challenge.controller('challengeController', function($scope) {
$scope.submitForm = function () {
alert($scope.formFriendsAll);
};
$scope.formFriendsAll = 'Friends';
});
I used the alert to test the change of value when i hit the submit button but i tried various methods like ng-changed, ng-click, ng-value. but nothing helped me solve the issue that my alert and "currently selected" stays on "Friends"
Any suggestions?

ok guys. seems like the AdminLTE.css i used in my head for the design of the radio buttons blocked the angular somehow

Indicate checkbox checked in angular

I have put together what I thought would be a very simple example of how I could fire off a function from a checkbox being checked in angular and have that function check to see the new value of the checkbox and accordingly display or not display a message. It works, but only after I have checked and unchecked the box at least once. For this reason I figured I simply would need to default the checkbox value to false and that would take care of the problem but it didn't. Can anyone help me tweak this to get it working and if so, maybe explain why my thinking is flawed, what do I not understand about the $scopes state. BTW it is also flipped, meaning that when I check the box the message goes away and when I uncheck it it says it's checked.
I am doing these exercises to get a better idea how angular works and I know deep down this is a javascript issue, but I still don't have it figured out. Any help is appreciated
app.js
var formApp = angular
.module('formApp', [])
.controller('formController', function($scope) {
$scope.formData = {};
$scope.redCheckFunction = function() {
if ($scope.formData.favoriteColors.red == true){
$scope.redMessage = "red is checked";
} else {
$scope.redMessage = "";
}
};
});
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div>
<h2>Angular Checkboxes</h2>
<form>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name"
ng-model="formData.name">
<label>Description</label>
<input type="text" class="form-control" name="description"
ng-model="formData.description">
</div>
<!-- MULTIPLE CHECKBOXES -->
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors"
ng-model="formData.favoriteColors.red"
ng-init="favoriteColors.red.disabled=false"
ng-click="redCheckFunction()"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors"
ng-model="formData.favoriteColors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors"
ng-model="formData.favoriteColors.green"> Green
</label>
</div>
<button type="submit" class="btn btn-danger btn-lg">Send Away!</button>
<h2>{{redMessage}}</h2>
</form>
<h2>Sample Form Object</h2>
<pre>
{{ formData }}
</pre>
</div>
</body>
</html>
I created a pen to make things easier:
Checkbox Pen

ng-click is fired before the model is updated:
Note that ngClick events will occur before the model is updated.
You need to use the ng-change directive:
Evaluate the given expression when the user changes the input.
http://codepen.io/anon/pen/azaJob
<label>Favorite Colors</label>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red" ng-init="formData.favoriteColors.red.disabled=false" ng-change="redCheckFunction()"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
</label>
</div>
When you enter the function redCheckFunction the value is already updated.

Getting radio button value when button is clicked is not working angularjs

I am new in angularjs.I want to fetch the radio button value when user click a button,but my bad luck its not working.Here is the code
<label class="item item-radio">
<input type="radio" name="group" ng-model="user.answer" value="{{questions.quiz_ans_opt1}}">
<div class="item-content item-body">a) {{questions.quiz_ans_opt1}}</div><i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio item-body">
<input type="radio" name="group" ng-model="user.answer" value="{{questions.quiz_ans_opt2}}">
<div class="item-content item-body">b) {{questions.quiz_ans_opt2}}</div><i class="radio-icon ion-checkmark"></i>
</label>
<button class="button button-balanced button-block" ng-click="submitAnswer(user)">Submit</button>
Here is controller
$scope.submitAnswer = function(user) {
//it output undefined error
alert(user);
}
Also i want to disable the button until a radio button is checked,how can i achive this?

Please have a look at this,
Try this,
In html,
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input type="radio" ng-model="user.answer" ng-value="'option a'">
<label>option a</label>
<br>
<input type="radio" ng-model="user.answer" ng-value="'option b'">
<label>option b</label>
<br>
<input type="radio" ng-model="user.answer" ng-value="'option c'">
<label>option c</label>
<br>
<input type="radio" ng-model="user.answer" ng-value="'option d'">
<label>option d</label>
<br>
<button ng-disabled="!user.answer" ng-click="submitAnswer(user)">Submit</button>
</body>
In app.js,
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.submitAnswer=function(user){
alert(user.answer);
}
});
Here is the plunker demo for the same

Though a bit late, i would like to post a second approach, since you are using Ionic-Framework.
If you at all have a dynamic number of radio button options, that are being driven by backend data [Even if you have a static
radio button set, you can convert it to the formal], Then you should instead use Ionic's Radio Buttons :
I.E, In your HTML :
<ion-radio ng-repeat="user in userAnswers"
ng-value="user.answer"
ng-model="finalAnswer">
{{ item.text }}
</ion-radio>
And in your controller :
$scope.userAnswers = [
{ text: "Backbone", answer: "bb" },
{ text: "Angular", answer: "ng" },
{ text: "Ember", answer: "em" },
{ text: "Knockout", answer: "ko" }
];
$scope.finalAnswer = 'ng';
More Details can be found in the official documentation and the CodePen Demo

This post really helped me out. I ended up changing all my radio button ng-click events to ng-change. Hope this helps.
AngularJS - Trigger when radio button is selected