We Keep Coding

How to set the class="required" jquery for radios under a row and not attacheing it to the first radio

Hi im at coding a form and i needed a validation form for my radio and checkbox inside my form so i searched around the net and found out that jquery 1.3+ has class="required" tag that does exactly what i wanted but
i have this section of radios :
<label class="label" type="radio" name="sloganch" >Does your slogan need to be incorporated in your Logo Design ?</label>
<div class="inline-group">
<label class="radio"><input type="radio" name="radio-inline" class="required" ><i></i>Yes</label>
<label class="radio"><input type="radio" name="radio-inline" ><i></i>No</label>
<label class="radio"><input type="radio" name="radio-inline"><i></i>Maybe</label>
<label class="radio"><input type="radio" name="radio-inline" ><i></i>I decide later</label>
</div>
And if i put the class="required" on the first radio when it calls this function it distort my radios by attaching " This field is required" to my first radio
and distort the complete line of radios .
Is it possible somehow to fix this to set for eg the " This field is required" under the complete row ? thanks in advance

this should work
$("input:radio:not(:first)").addClass("test");
EDIT
This should work i have also included a js fiddle for your reference
the above code will add class test to all the radio buttons except the first
JS Fiddle

clicking on custom checkbox does not run the associated onClick function

I'm trying to use Ryan Fait's custom checkboxes. These are much more readable than the standard checkboxes, but clicking on them does not run the associated onClick functions. Any advice will be appreciated. The relevant portion of my code follows:
<p style="font-family:arial; font-size:large">
<input type="checkbox" class="styled" id="level-0" type="radio" value="0"
onClick="count();"> 0 (ages 5-7)
<input type="checkbox" class="styled" id="level-1" type="radio" value="1"
onClick="count();" checked> 1 (beginner)
<input type="checkbox" class="styled" id="level-2" type="radio" value="2"
onClick="count();" checked> 2 (easy)
<input type="checkbox" class="styled" id="level-3" type="radio" value="3"
onClick="count();" checked> 3 (intermediate)
<input type="checkbox" class="styled" id="level-4" type="radio" value="4"
onClick="count();"> 4 (challenging)
<input type="checkbox" class="styled" id="level-5" type="radio" value="5"
onClick="count();"> 5 (hard)
<input type="checkbox" class="styled" id="level-all" type="radio" value="6"
onClick="all_levels();"> All
<input id="available" type="button" style="background-color:white; border:2px;
font-family:arial; font-size:large" value="??"> </p> <br>

From Styling Checkboxes and Radio Buttons With CSS and JavaScript on Ryan Fait's site:
How does it work?
In a nutshell, the JavaScript looks for every form element with
class="styled" on it; hides the real form element; sticks a span tag
with a CSS class on it next to the element; and, finally, mouse events
are added to the span that handles the visual stages form inputs go
through when they are clicked.
Your inline onClick handlers are not firing because your checkboxes aren't actually being clicked. Ryan explicitly says that it "hides the real form element; sticks a span tag with a CSS class" ... so you are actually clicking on the <span> that Ryan's code inserted; the real checkbox is hidden.
Later in the article, Ryan says outright:
onChange and other JavaScript events
This script utilizes JavaScript's onChange and other events. Because
these events can only be used once, if you want to add more functions
to an event, you will need to call them from inside my script.
You will need to call them from inside my script
Take your onClick= out of the <input> tags; add your code to his code -- you'll have to figure out which bit of your code to call from his code, since I see you're doing different things from your onClicks.
You should also take your style="..." out of your tags and use a stylesheet, but that's a separate issue.

Checking and unchecking radio buttons with Jquery Mobile

I can't check a set of checkboxes programatically with jquery mobile, I have the following code:
<div data-role="fieldcontain" id="div_radio" class="radiogroup">
<fieldset data-role="controlgroup">
<input type="radio" name="radio-pieces" id="radio-choice-1" value="3" checked="checked" />
<label for="radio-choice-1">1 to 3</label>
<input type="radio" name="radio-pieces" id="radio-choice-2" value="5" />
<label for="radio-choice-2">4 to 5</label>
<input type="radio" name="radio-pieces" id="radio-choice-3" value="6" />
<label for="radio-choice-3">over 5</label>
</fieldset>
</div>
If I do: $("input[type='radio']:last").attr("checked",true).checkboxradio("refresh"); everything works perfect, but none of this work at all:
$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");
$("input[type='radio']:eq(0)").attr("checked",true).checkboxradio("refresh");
$("input[type='radio']:eq(1)").attr("checked",true).checkboxradio("refresh");
$("input[type='radio']:eq(2)").attr("checked",true).checkboxradio("refresh");
How can I properly manipulate these elements? Unselecting all checkboxes also works fine:
$("input[type='radio']").attr("checked",false).checkboxradio("refresh");
It seems that the only checkbox working is the last one.

They all work just fine. You just need to trigger refresh on all input radio in group.
$("input[type='radio']:first").attr("checked", "checked");
$("input[type='radio']").checkboxradio("refresh");
jsFiddle is here.

Nothing worked for me except:
$('#reset').click(function(){
$('#Store').trigger("click").trigger("click"); // yes... twice
});
On jQuery Mobile 1.4.2.

For me works this to uncheck the whole group of radios:
$(".my_class").removeAttr("checked");
$(".my_class").checkboxradio("refresh");

This doesn't seem right.
The single quote is not needed input[type=radio] is correct.
I'm using an outdated version (1.1.1).
It would be help to know what version you're using.
Keep in mind that those are radio buttons, only one selected at a time.

in Jquery mobile radio button refresh like this:
$(".iscfieldset input[type='radio']:first").attr("checked", "checked");
$(".iscfieldset input[type='radio']").checkboxradio().checkboxradio("refresh");
try this working fine for me

Jquery to Make 2 Sets of Radio Buttons Mirror Eachother

I am trying to setup two sets of radio buttons that will function simultaneously. In other words whenever Male is checked on the top, I would like Male at the bottom to be automatically checked. (and vice versa) If user scrolls down and clicks female then the one at the top should be checked. No matter which radio the user clicks both radio sets should always have the same value checked. Please advise on the most practical way to accomplish this. My main focus is Javascript or Jquery but I have spent several hours trying to come up with something to no avail. Please advise. Thanks! :)
<div class="top">
<input type="radio" name="sex" value="Male" /> Male<br />
<input type="radio" name="sex" value="Female" checked="checked" /> Female<br />
</div>
<div>Random Content</div>
<div class="bottom">
<input type="radio" name="sex2" value="Male" /> Male<br />
<input type="radio" name="sex2" value="Female" checked="checked" /> Female<br />
</div>

Attach to the change event and selecting all other radio buttons which have the same beginning of the name and are of equal value but which are not the current one.
$("input[name^='sex']").change(function(){
var $otherRadioButtons = $("input[name^='sex'][value='" + this.value + "']").not(this);
$otherRadioButtons.prop('checked', $(this).prop('checked'));
});
The above is not using any clever caching of the selectors which you can add yourself.
Basically, whenever a radio button changes it's checked value the code will select all other radio buttons with the same value (male/female) which also start with the same name (sex????) and set their checked property to the same value as the current one.
I hope this makes sense. See a working demo below.
DEMO - Changing radio buttons in a set.
Edit
I just noticed.. I am using jquery 1.3.2 and upgrading isnt an option
at the moment. You don't happen to have a 1.3.2 alternative do you?
For jQuery version 1.3.2 use the attr method instead of the prop method:
$("input[name^='sex']").change(function(){
var $otherRadioButtons = $("input[name^='sex'][value='" + this.value + "']").not(this);
$otherRadioButtons.attr('checked', $(this).attr('checked'));
});
DEMO - Changing radio buttons in a set using jQuery 1.3.2.

Just add an onclick listener to both sets. Like this:
document.getElementById("male1").onclick=clickMale;
document.getElementById("male2").onclick=clickMale;
document.getElementById("female1").onclick=clickFemale;
document.getElementById("female2").onclick=clickFemale;
function clickMale(){
document.getElementById("male1").checked=true;
document.getElementById("male2").checked=true;
}
function clickFemale(){
document.getElementById("female1").checked=true;
document.getElementById("female2").checked=true;
}
And add IDs to the radio buttons ("male1", "male2", "female1", "female2")

Since you mentioned it, Zove's answer in jQuery would be something like this, if you prefer:
$("#male1").click(clickMale);
$("#male2").click(clickMale);
$("#female1").click(clickFemale);
$("#female2").click(clickFemale);
function clickMale(){
$("#male1").attr('checked', true);
$("#male1").attr('checked', true);
}
function clickFemale(){
$("#female1").attr('checked', true);
$("#female2").attr('checked', true);
}
You don't need jQuery for something this simple, but if you're using it elsewhere, it's best to be consistent.

It might make sense, to share a class for both male / female inputs, e.g. 'js-male' or 'js-female'). This saves some code. for instance you could do:
$('.js-male').change(function() {
$('.js-male').attr('checked', $(this).attr('checked'));
});
$('.js-female').change(function() {
$('.js-female').attr('checked', $(this).attr('checked'));
});
There might be more elegant ways to deal with the whole situation so. Do you really want the inputs to have different names ('male', 'male2'), which means that your server receives two different params? If you give both radio button groups the same names, only the value of the last one will be sent to the server, anyway, if you mirror the radio buttons anyway, this doesn't really matter.
Demo

Just change the location of your jQuery source and this will work right out of the box.
<html>
<head>
<script src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#male1, #male2").live("click", function(){
$("#male1").attr("checked", $("#male2").attr("checked"));
$("#male2").attr("checked", $("#male1").attr("checked"));
});
$("#female1, #female2").live("click", function(){
$("#female1").attr("checked", $("#female2").attr("checked"));
$("#female2").attr("checked", $("#female1").attr("checked"));
});
});
</script>
</head>
<body>
<div class="top">
<input id="male1" type="radio" name="sex" value="Male" /> Male<br />
<input id="female1" type="radio" name="sex" value="Female" checked="checked" /> Female<br />
</div>
<div>Random Content</div>
<div class="bottom">
<input id="male2" type="radio" name="sex2" value="Male" /> Male<br />
<input id="female2" type="radio" name="sex2" value="Female" checked="checked" /> Female<br />
</div>
</body>
</html>

Why am I submitting the form twice? jQuery submit() with radio button

I'm using jQuery to submit a form in an MVC app. I have a breakpoint inside the controller and I see it is being hit twice. What am I doing wrong?
Here is my jQuery
(function ($) {
$(document).ready(function () {
$(':radio').change(function () {
$('#frmMDR').submit();
});
});
})(jQuery);
and here is the form html
<form action="/Module/ModuleIndex" id="frmMDR" method="get">
<input id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
<input id="hdnVehicle" name="hdnVehicle" type="hidden" value="" />
</form>
I'm guessing I shouldn't be using the change event. If anyone knows how to correct the problem, I'd love to hear any ideas. Thanks so much for any tips.
Cheers,
~ck in San Diego

You are getting two hits because two radio buttons are changing state. Radio buttons only allow one element in a group to be selected so when you are clicking a radio button, two events are happening:
A new radio button is selected
The previously selected radio button is deselected
This is two events and the reason why your code is being hit twice. To solve it you could give your radio buttons a class and then handle the event on click using the class as the selector.
<input class="radio" id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input class="radio" id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input class="radio" id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
And your jQuery could be:
$('.radio').click(function () {
$('#frmMDR').submit();
});

You should probably just check for selected within the change function for which is selected. This way it'll only fire for the selected radio button, and you don't need to worry about binding or unbinding any events, and it should work regardless of what input method changed it.
Here's an article on handling events from check boxes and radio buttons in JQuery.