Custom graphical Radio buttons with jQuery is somehow breaking index() - javascript

I'm using this customInput plugin (with jQuery 1.6.2) to customize the look of my radio buttons.
It works great.
The problem I have now is that I'm just trying to get the index() number of the selected radio button and it always returns 0. There are six radio buttons and I'm looking for a number between 0 and 5.
JavaScript:
$('input[name="amount"]').click(function() {
var x = $(this).filter(':checked').index();
var y = $(this).filter(':checked').val(); //<-- for troubleshooting
alert(x + y); //<-- for troubleshooting
});
Oddly, val() is still working fine and returns the proper value. Therefore, the form data is always getting the correct radio value.
http://jsfiddle.net/sparky672/LdVGD/
HTML:
<fieldset id="radioset">
<input type="radio" id="radio-1" name="amount" value="Option 1" checked="checked" /><label for="radio-1" title="">Option 1</label>
<input type="radio" id="radio-2" name="amount" value="Option 2" /><label for="radio-2" title="">Option 2</label>
<input type="radio" id="radio-3" name="amount" value="Option 3" /><label for="radio-3" title="">Option 3</label>
<input type="radio" id="radio-4" name="amount" value="Option 4" /><label for="radio-4" title="">Option 4</label>
<input type="radio" id="radio-5" name="amount" value="Option 5" /><label for="radio-5" title="">Option 5</label>
<input type="radio" id="radio-6" name="amount" value="Option 6" /><label for="radio-6" title="">Option 6</label>
</fieldset>
When simply not using the customInput plugin, the index number is then returned.
http://jsfiddle.net/sparky672/LdVGD/1/
Side Question:
After disabling the plugin, the index() returns 0, 2, 4, 6, 8, or 10. It's like the <label> itself is being counted at part of the index(), effectively doubling the count. Why should this be?
I cannot remove the <label> elements as the plugin depends on these to function.
I just want to retrieve a number from 0 to 5 depending on whether radio button 0 through 5 is checked.
Any suggestions? Perhaps another method to check which radio button is selected?
My ultimate goal? To simply change some variables depending on which button is selected.

As you've noticed, your index call doesn't quite work the way you expect it to when you don't use the plugin. From the fine manual:
If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
You're getting values twice as large as you think they should be because the <label> elements are also siblings so you have five <input> elements and five <label> elements in the sibling list.
When you activate the plugin, your radio buttons get wrapped in a <div> so the structure of each button looks like this:
<div>
<input type="radio">
<label>
</div>
That leaves the radio button with a single sibling, <label>, and an index of zero.
You already have id attributes on your radio buttons so why not use those to figure out the index? Something like this:
var index = parseInt(this.id.replace(/radio-/, ''), 10) - 1;
Check the third number in these demos:
With plugin: http://jsfiddle.net/ambiguous/nGVkC/
Without plugin: http://jsfiddle.net/ambiguous/UkPh8/
Or you could use the element form of index:
If .index() is called on a collection of elements and a DOM element or jQuery object is passed in, .index() returns an integer indicating the position of the passed element relative to the original collection.
So you could do it like this:
var i = $('input[name=amount]').index(this);
And some demos:
With plugin: http://jsfiddle.net/ambiguous/yAVHn/
Without plugin: http://jsfiddle.net/ambiguous/vP3Du/

Related

how to make a tag change properties after a specific input is checked?

I am creating a quiz website for a school project. Whenever a correct answer is selected (input type=radio) then I want the line adjacent to it to become green and when an incorrect answer is selected I want the line to become red.
Is there any way to do this using css only and not JavaScript.
Have some attribute in your input indicating that it's the right option and then listen for it in CSS using the [attribute="value"] then select the next tag (p etc.) with some kind of operator (like +)
JSfiddle demo
You can see this tutorial:
https://css-tricks.com/form-validation-ux-html-css/
The beginning is in css without js.
See also all css selectors, you can find your happiness:
https://www.w3schools.com/cssref/css_selectors.asp
Good work !
That can't be done without involving javascript or jquery. You must have to trigger your code when checkbox is selected. Here is an example:
function myFunction() {
var radios = document.getElementsByName('rd1');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
// use if condition to check if selected answer is correct or not
// and then simply change text color OR add a css class, which have predefined text colors for success and error
alert(radios[i].value);
// only one radio can be logically checked, don't check the rest
break;
}
}
}
<input type="radio" name="rd1" id="red" value="Option 1" onchange="myFunction()"><label>Option 1</label><br>
<input type="radio" name="rd1" id="red" value="Option 2" onchange="myFunction()"><label>Option 2</label><br>
<input type="radio" name="rd1" id="red" value="Option 3" onchange="myFunction()"><label>Option 3</label><br>
<input type="radio" name="rd1" id="red" value="Option 4" onchange="myFunction()"><label>Option 4</label><br>

set groupt of radion value jquery

i have a group ooa radion buttons defined as so
<input type="radio" name="required[status]" id="status" value="1">Yes </label>
<input type="radio" name="required[status]" id="status_1" value="0"> No </label>
<input type="radio" name="required[status]" id="status_2" value="2">Maybe </label>
this is stores the value 0,1,2 in a field status in the db
later, i get the value from db as 1, how do i use jquery to check the appropriate radio button?
if you are trying to check the radio button element by its value you can you the jquery attribute selector.
click me
you can get the element by its value like this:
$('[value=VALUE_FROM_DB]').prop("checked", true);

How to select a input with name and value

I need to select a radio input with name and value in jquery
In this example how you select element with name SiblingSex and value female
<form action="">
<input type="radio" name="SiblingSex" value="male">Male<br>
<input type="radio" name="SiblingSex" value="female">Female
<input type="radio" name="ParentSex" value="male">Male<br>
<input type="radio" name="ParentSex" value="female">Female
</form>
i need some thing like
$('input[name="SiblingSex"]' /*GENDER SELECTOR */)
You can add another attribute selector with this:
$('input[name="SiblingSex"][value="female"]').val();
the above line would give you values every time whether it is checked or not.
so if you only want to have the value when it is checked too then add :checked
$('input[name="SiblingSex"][value="female"]:checked').val();
Just have a look on the Demo on my JS Fiddle Code
Shows the two scenario:
1) when you want the value without selecting radio button.
2) when you want value after selecting radio button.
or may be the thing that you want is here::
JS Fiddle Demo

How to get the value of selected radio button in javascript/jquery

Here is the html part:
<input class="demo" radio-value="yes" name="Radios" id="sample1" value="" type="radio">
<input class="demo" radio-value="yes" name="Radios" id="sample2" value="" type="radio">
<input class="demo" radio-value="yes" name="Radios" id="sample3" value="" type="radio">
<input class="demo" radio-value="yes" name="Radios" id="sample4" value="" type="radio">
How can I know which radio button the user is selected and how can I know the value of selected radio button.
I want to get the "radio-value" of the selected button. Because, I will be using value for json input..
How can I do that??
First of all, all of your radio buttons have the same id - this is illegal and can cause unexpected behavior. Provided this is fixed, you can do something like this:
var selectedValue = $("input.demo:checked").val();
and for radio-value:
var selectedRadioValue = $("input.demo:checked").attr("radio-value");
Use :selected with class selector to get the selected radio button. You should give unique ids to html elements. Also the value of all the radio button is empty string you may need to assign some values to them
$('.demo:selected').val();
$('.demo:selected').val(); // class is demo
This would do the trick!
But you need to remove the id that is similar among all the elements. You should change their value such as sample1, sample2 etc. Then you can get the value, and the id.

jQuery live span not updating until a second click

To check this out please go to http://offline.raileisure.com/
on the right hand side the booking section, choose station masters house, then choose a check in date of 15 August. then choose 4 days...
OK
Now go back and choose a different date of 29th August.
The 4 days should deselect, but it doesn't until you do a further click anywhere else...
I think I need to be updating a live attr. but not sure.
to untick #spanduration I am using:
$('input[name="duration"]').removeAttr('checked');
$("#spanduration").attr("style", "background-position: 0px 0px;");
but it is not working until you do that second click anywhere.
Maybe it because its a radio button.
Try to change it to a checkbox?
Radio button dont like to be unchecked if none other is checked:
<input type="radio" value="0" name="duration">
<input type="radio" value="1" name="duration">
<input type="radio" value="2" name="duration">
<input type="radio" value="3" name="duration">
And standalone
<input type="radio" value="0" name="other_name">
On the other hand checkboxes uncheck each other: (note the name is array like)
<input type="checkbox" value="0" name="duration[]">
<input type="checkbox" value="1" name="duration[]">
<input type="checkbox" value="2" name="duration[]">
<input type="checkbox" value="3" name="duration[]">
And standalone
<input type="checkbox" value="0" name="other_name">
You can write something like this to have the ability of a standalone checkbox and also the sweetness of grouped radio-buttons: http://jsfiddle.net/LJJrZ/
$(document).ready(function(){
var selector = "input[type=checkbox]";
$(selector).click(function(event){
var checked = $(this).is(':checked');
if ( checked ) {
$(selector).attr("checked", false);
$(this).attr("checked", true);
}
});
});
The change event doesn't fire on a text input until the input is blurred.
You could try to manually blur the input after the date is populated (not great for accessibility). Or better yet, manually trigger the change event yourself after the date is populated. e.g.
//...
// After date is populated
$('#date').trigger('change');
//...
See full example here: http://jsfiddle.net/irama/rJGpn/
EDIT: Looking at your code, it looks like there's an opportunity (when you instantiate the datepicker) to insert this into a callback function:
$('#date').datepicker({
// ...
onSelect: function (e) {
// ...
$('#date').trigger('change');
}
// ...
Let us know how you go!

Categories