Develop Reference

Ignore value radiobuttons - iCheck

I try this way for get a value from radiobuttons (iCheck), but all the time only return the value from the first radio, ignoring the remaining. The theory says that the code is fine, even so it returns badly.
Radio box, get the checked value [iCheck]
My code:
<div class="step row">
<div class="col-md-10">
<h3>YYYYYY.</h3>
<ul class="data-list-2">
<li><input name="p1" id="p1" type="radio" class="required check_radio" value="1"><label>Yes</label></li>
<li><input name="p1" id="p1" type="radio" class="required check_radio" value="0"><label>No</label></li>
<li><input name="p1" id="p1" type="radio" class="required check_radio" value="2"><label>Meybe</label></li>
</ul>
</div>
</div>
<!-- end step -->
My method for get value:
$(document).ready(function() {
$('#p1').on('ifChecked', function(event) { //try ifClicked - ifToggled
alert($(this).val()); // alert value
});
});
All the time return value 1 even when another option is selected.
Please help, I try all the night different ways but doesn't work ;(

I'm not sure how you are generating the ids for your radio buttons, but the id property should always be unique, since you want the same event handling on your radio buttons, just use the class so that it attaches the event to all your radio buttons which belong to that class, then you don't have to add events for each individual id:
So instead of this:
//If you did it this way, you'd have to have one of these blocks for each
//unique id belonging to a radio button
$('#p1').on('ifChecked', function(event){ //try ifClicked - ifToggled
alert($(this).val()); // alert value
});
Change it to this:
//Use the class instead so that the same event handling can be added to all radio
//buttons in one block of code
$('.required.check_radio').on('ifChecked', function(event){ //try ifClicked - ifToggled
alert($(this).val()); // alert value
});

Checkboxes, javascript runs 2 times through function if I click on text

I want to click on a checkbox and if I click this box it should run a function what gets an ID and saves it into an array or deletes it from the array if it still exists in the array.
That works, but if I click on the text beside the box the function runs twice. It first writes the ID into the array and then deletes it.
I hope you can help me so that I can click on the text and it just runs once
HTML
<label><input type="checkbox" value="XXX" >Active</label>
JavaScript/jQuery
function addOrRemoveBoxes(ID){
if(boxArr.indexOf(ID) != -1){
removeFromArray(ID)
}
else{
boxArr.push(ID);
}
}
$(".checkBoxes").unbind().click(function() {
event.stopPropagation();
addOrRemoveBoxes($(this).find('input').val());
});

The problem is probably that your label and your input are picking the click. Try to bind it only to input. Like this:
$(".checkBoxes input").unbind().click(function() {
event.stopPropagation();
addOrRemoveBoxes($(this).find('input').val());
});

Your HTML is structured bad. When your label is clicked it triggers a click event for the input so you have to separate the input form the label like: <input type="checkbox" name="opt1" id="opt1_1" value="ENG"> <label for="opt1_1">hello</label>. Also your jQuery makes no sense, why do you use unbind()? And we can't see what removeFromArray() does (we can guess but I prefer to see all code used or note that you use pseudo code).
I made this in 5 min: (hopes it helps you)
$(document).ready(function(){
window.boxArr = [];
$(document).on('click','[name=opt1]',function(){
addOrRemoveBoxes(this.value);
//show contents of boxArr
if(boxArr.length == 0){
$('#output').html('nothing :/');
}
else{
$('#output').html(boxArr.join(" -> "));
}
});
});
function addOrRemoveBoxes(ID){
var arrayIndex = boxArr.indexOf(ID);
if(arrayIndex > -1){
boxArr.splice(arrayIndex, 1);
}
else{
boxArr.push(ID);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Choose</h1>
<input type="checkbox" name="opt1" id="opt1_1" value="ENG"> <label for="opt1_1">hello</label> <br>
<input type="checkbox" name="opt1" id="opt1_2" value="DUT"> <label for="opt1_2">hallo</label> <br>
<input type="checkbox" name="opt1" id="opt1_3" value="SWE"> <label for="opt1_3">hej</label>
<br><br><h2>Array contains:</h2>
<div id="output">nothing :/</div>
Side note: with [name=opt1] we select all the elements with name="opt1" attribute.

jQuery: show / hide Div when first or second radio button is selected

I am new to jQuery and hope someone here can help me with this.
I am trying to show / hide a div ('requestDetails') if the first OR second of a variable range of radio buttons is selected (the reason for this is that I would like to avoid hard-coding specific values to check for).
So far I only have a hard-coded solution but this doesn't work properly and I am not sure about how to address only the first and second radio button without this.
I tried to avoid using IDs or further classes on the radio buttons to reduce code but can add this if recommended.
My jQuery:
$('[name=requestType]').on('change', function(){
if( ($('[name=requestType]').val() == 'value1') || ($('[name=requestType]').val() == 'value2') ){
$('#requestDetails').show();
}else{
$('#requestDetails').hide();
}
});
My HTML:
<input type="radio" name="requestType" value="value1" />Value1
<input type="radio" name="requestType" value="value2" />Value2
<input type="radio" name="requestType" value="value3" />Value3
// ...
<div id="requestDetails" class="hidden"> ... </div>
Many thanks in advance for any help,
Mike

try
$('[name=requestType]').on('change', function () {
$('#requestDetails').toggle((this.value == 'value1' || this.value == 'value2'));
});
DEMO

If I were you, I would identify the buttons you would like to use as triggers for this show/hide event with a new class. Then attach the event to this class of button. This does not add much in code overhead.
Example:
<input type="radio" class="special" name="requestType" value="value1" />Value1
<input type="radio" class="special" name="requestType" value="value2" />Value2
<input type="radio" name="requestType" value="value3" />Value3
$('.special').on('change', function(){
if( ($('[name=requestType]').val() == 'value1') || ($('[name=requestType]').val() == 'value2') ){
$('#requestDetails').show();
}else{
$('#requestDetails').hide();
}
});
This will result in button 1 and button 2 affecting the div with id=requestDetails, while button 3 or any others without the class will not.

With no hardcoding, use the parent containing the inputs and use :nth-child selector. See jsfiddle for example :
$('[name=requestType]').on('change', function () {
if($('#parent input:nth-child(2)').val() == $(this).val() ||$('#parent input:nth-child(3)').val() == $(this).val())
$('#requestDetails').toggle();
});
http://jsfiddle.net/cwahL1tz/11/
Also made one with the exact behavior you wan to obtain : http://jsfiddle.net/cwahL1tz/13/

How to output the value of my radio button when click

I'm very noob in javascript. My question is how do I show the value of my radio button when click?
I have this code:
<tr><td width="10px"></td><td width="60%">Neatness</td>
<td width="40%">
<input name="neat" type="radio" class="hover-star" value="1" title="Poor"/>
<input name="neat" type="radio" class="hover-star" value="2" title="Fair"/>
<input name="neat" type="radio" class="hover-star" value="3" title="Satisfactory"/>
<input name="neat" type="radio" class="hover-star" value="4" title="Outstanding"/>
</td></tr>
Say when my 1st radio button it will show 1 or so on.. How can I achieve this? Or better yet does anyone know how to do this in jquery.

Use the jQuery class selector and attach to the click event:
$('.hover-star').click(function () {
alert($(this).val());
}
Here's a working jsFiddle fiddle.
Alternatively, you could attach to the change event.
$('.hover-star').change(function () {
alert($(this).val());
}
Take a look at the jQuery selectors documentation.

With jQuery you can bind the click event to any element with class hover-star, and use the val method to get the value. This will fire whenever any radio button is clicked (even if the selection does not change):
$(".hover-star").click(function() {
var selectedVal = $(this).val();
});
You could also use the change event, which fires whenever the selected radio button changes:
$(".hover-star").change(function() {
var selectedVal = $(this).val();
});
You say you want to "show" the value of the radio button, but as you haven't provided more details it's difficult to say where you want to show it! But the principle will be the same as I have shown above - in the event handler function you can do whatever you need to with the value.
Update based on comments
As you want to put the value into a div, you can simply do this inside the change event handler:
$("#yourDivId").text($(this).val());

Try this
$('.hover-star').click(function () {
alert($(this).val());
}

Here you go ...
$('.hover-star').click(function (){$('#someDiv').text($(this).val());

Jquery COde:
$(".hover-star").change(function() {
var selectedVal = $(this).val();
alert(selectedVal);
});
See Demo: http://jsfiddle.net/rathoreahsan/wVa7c/

Calling onclick on a radiobutton list using javascript

How do I call onclick on a radiobutton list using javascript?

How are you generating the radio button list? If you're just using HTML:
<input type="radio" onclick="alert('hello');"/>
If you're generating these via something like ASP.NET, you can add that as an attribute to each element in the list. You can run this after you populate your list, or inline it if you build up your list one by one:
foreach(ListItem RadioButton in RadioButtons){
RadioButton.Attributes.Add("onclick", "alert('hello');");
}
More info: http://www.w3schools.com/jsref/event_onclick.asp

To trigger the onClick event on a radio button, invoke the click() method on its DOM element:
document.getElementById("radioButton").click()
using jQuery:
$("#radioButton").click()
AngularJs:
angular.element('#radioButton').trigger('click')

I agree with #annakata that this question needs some more clarification, but here is a very, very basic example of how to set up an onclick event handler for the radio buttons:
window.onload = function() {
var ex1 = document.getElementById('example1');
var ex2 = document.getElementById('example2');
var ex3 = document.getElementById('example3');
ex1.onclick = handler;
ex2.onclick = handler;
ex3.onclick = handler;
}
function handler() {
alert('clicked');
}
<input type="radio" name="example1" id="example1" value="Example 1" />
<label for="example1">Example 1</label>
<input type="radio" name="example2" id="example2" value="Example 2" />
<label for="example1">Example 2</label>
<input type="radio" name="example3" id="example3" value="Example 3" />
<label for="example1">Example 3</label>

The problem here is that the rendering of a RadioButtonList wraps the individual radio buttons (ListItems) in span tags and even when you assign a client-side event handler to the list item directly using Attributes it assigns the event to the span. Assigning the event to the RadioButtonList assigns it to the table it renders in.
The trick here is to add the ListItems on the aspx page and not from the code behind. You can then assign the JavaScript function to the onClick property. This blog post; attaching client-side event handler to radio button list by Juri Strumpflohner explains it all.
This only works if you know the ListItems in advance and does not help where the items in the RadioButtonList need to be dynamically added using the code behind.

I think all of the above might work. In case what you need is simple, I used:
function checkRadio(name) {
if (name == "one") {
console.log("Choice: ", name);
document.getElementById("one-variable-equations").checked = true;
document.getElementById("multiple-variable-equations").checked = false;
} else if (name == "multiple") {
console.log("Choice: ", name);
document.getElementById("multiple-variable-equations").checked = true;
document.getElementById("one-variable-equations").checked = false;
}
}
<div class="radio-buttons-choice" id="container-3-radio-buttons-choice">
<input type="radio" name="one" id="one-variable-equations" onclick="checkRadio(name)"><label>Only one</label><br>
<input type="radio" name="multiple" id="multiple-variable-equations" onclick="checkRadio(name)"><label>I have multiple</label>
</div>

Try the following solution
$(document).ready(function() {
$('.radio').click(function() {
document.getElementById('price').innerHTML = $(this).val();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="variant">
<label><input type="radio" name="toggle" class="radio" value="19,99€"><span>A</span></label>
<label><input type="radio" name="toggle" class="radio" value="<<<"><span>B</span></label>
<label><input type="radio" name="toggle" class="radio" value="xxx"><span>C</span></label>
<p id="price"></p>
</div>

The other answers did not work for me, so I checked Telerik's official documentation it says you need to find the button and call the click() function:
function KeyPressed(sender, eventArgs) {
var button = $find("<%= RadButton1.ClientID %>");
button.click();
}