We Keep Coding

Hide/Show of text using radio button selection

I have 3 sets of radio buttons and I want to show a text if all are selected and its value is "true" (Yes). Hide a text if at least 1 value is "false" (No).
My Page would look like:
Are you eligible for this? .Yes .No
Are you paying your bills monthly? .Yes .No
Do you have health insurance? .Yes .No
I want to do this in jQuery, I've attached my code below!!
<div>Are you eligible for this?</div>
<div>
<div>
<label for="yes">Yes</label>
<input type="radio" name="mygroup" id="yes" value="true" />
</div>
<div>
<label for="no">No</label>
<input type="radio" name="mygroup" id="no" value="false" />
</div>
</div>
<div>Are you paying your bills monthly?</div>
<div>
<div>
<label for="yes1">Yes</label>
<input type="radio" name="mygroup" id="yes1" value="true" />
</div>
<div>
<label for="no1">No</label>
<input type="radio" name="mygroup" id="no1" value="false" />
</div>
</div>
<div>Do you have health insurance?</div>
<div>
<div>
<label for="yes2">Yes</label>
<input type="radio" name="mygroup" id="yes2" value="true" />
</div>
<div>
<label for="no2">No</label>
<input type="radio" name="mygroup" id="no2" value="false" />
</div>
</div>
The jQuery script I came up with:
$("input[name='mygroup']").change(function(){
if($(this).attr("value")=="true" && $(this).is(":checked")){
//show
}else{
//hide
}
});
Can we go with count of selected radio buttons?

You could do an onClick method that would check to see if all three radio buttons are true. Once that condition is met, just set the text to display however you want it to (e.g. x.style.display = 'none')
Note: SO isn't for free coding, but if there is a principle or error you are having difficulty with, that can be addressed.

How to select multiple elements by id using jQuery

I have two radio buttons:
<p>
<label for="input_1">Path to Excellent </label>
<input id="input_1" name="radio" type="radio" value="1" />
</p>
<p>
<label for="input_2">Award of Excellence</label>
<input id="input_2" name="radio" type="radio" value="2" />
</p>
I would like to get val() from one of them using their ids: "input_1" or "input_2" by jQuery, something like this:
$('input[#input_1,#input_2]:checked').val();
My aim is to get val() from one of them that is checked, by id. How can I do this?

You can check the starts of the id in this case:
$("input[id^='input_']:checked").val();

required on radio buttons

i am using a single html5 required attribute for group of radio buttons as this
<td>
<label for="input1">English:</label><input type="radio" ng-model="Customer.language" id="input1" required value="english" />
<label for="input2">Arabic:</label><input type="radio" ng-model="Customer.language" id="input2" value="arabic" />
</td>
but its not working as per the expectaions
i am not able to submit the result until i select english i.e even when i select arabic "the reqired field message is prompted on english"

You need to add a name attribute for your Radio Button Group:
<input type="radio" ng-model="Customer.language" id="input1" value="english" name="language" required />
<input type="radio" ng-model="Customer.language" id="input2" value="arabic" name="language" required />
Note: i added the Required Statement for the second input as well.

I see some "ng-" in your component, so i think you use AngularJS.
So, you can try this one for your required :
<td>
<label for="input1">English:</label><input type="radio" ng-model="Customer.language" id="input1" ng-required="!Customer.language" value="english" />
<label for="input2">Arabic:</label><input type="radio" ng-model="Customer.language" id="input2" ng-required="!Customer.language" value="arabic" />
And name is not needed ;)
With that, your field will be required only if no value is selected ;)

Checkbox to button focus

I've got multiple forms on my page. In one form I've got 3 text fields a check box and a button. When the tab key is pressed, it goes to the 3 text fields and then to the checkbox and then no where.
How can I focus the button (submit) after the checkbox (maths) and then back to the first text field (user_id).
<form id="form13">
User ID :<input type="text" id="user_id" /><br>
Password: <input type="password" id="password" /><br>
Department: <input type="text" id="department" /><br>
<input type="checkbox" id="maths" value="on"> Maths
<input type="submit" id="submit" value="Submit" />
</form>
$('#maths').keydown(function(e){
if (e.which == 9){
$('#submit).focus();
}
});

If your need is to handle Tabbing in your HTML forms. Then you may need to handle this with HTML attribute tabindex this is a good article for learning purpose:
<input id="foo" tabindex="1" />
<input id="bar" tabindex="3" />
<input id="awesome" tabindex="2" />
So, you can handle it in your way. And yes, you can also change it dynamically by using Javascript:
document.getElementById("foo").tabIndex = "3";
I hope it may help you.

You should organize your form in such a way that it can be navigated using the keyboard only.
For example, have a look at this form:
Accessible Signup form
Manually setting the tabindex may lead to problematic behavior. There are couple of good article why you should not do it:
Using the tabindex attribute
Don’t Use Tabindex Greater than 0
Be aware when manually setting a tabindex as suggested, this will affect natural flow of tab index in form and document. Use this only when you are absolutely sure about it.
You can organize your form in such a way that keyboard navigation of your form works without you using tabindex.
Have a look at following Pen : Form field focus, you'll see that from checkbox, the focus goes directly to submit button and back :
<form id="form13">
<label for="asdfg-user_id" id="user_id-ariaLabel">
User ID: <input type="text" id="asdfg-user_id" />
</label>
<br>
<label for="password" id="password-ariaLabel">
Password: <input type="password" id="password" />
</label>
<br>
<label for="password" id="password-ariaLabel">
Department: <input type="text" id="department" />
</label>
<br>
<fieldset id="interestInfo">
<legend>Subject </legend>
<div>
<div id="interests"></div>
<div>
<div class="row">
<input id="chk_Subject_1_lbl" name="chk_Subject[]"
type="checkbox"
value="on"/>
<span>
<label for="chk_Subject_1" id="AreaOfInterest_1-ariaLabel" >Math</label>
</span>
</div>
<div class="row">
<input id="chk_Subject_2_lbl" name="chk_Subject[]"
type="checkbox"
value="on"/>
<span>
<label for="chk_Subject_2" id="AreaOfInterest_2-ariaLabel" >Chemistry</label>
</span>
</div>
</div>
</div>
</fieldset>
<input type="submit" id="submit" value="Submit" />
</form>

Radio Buttons: weird selection behaviour

I have been fumbling around with this problem for an hour now and I can't figure out why this strange behaviour in Radiobuttons occurs. The following is my code:
<label>Language
<input type="radio" id="de" value="de" onclick="switchRadioButtons(this);" >de
<input type="radio" id="en" value="en" onclick="switchRadioButtons(this);" >en
<input type="radio" id="other" value="other" onclick="switchRadioButtons(this);" >other
<input type="text" id="language" value="" /><br />
</label>
<script>
function switchRadioButtons(element) {
console.log(element.value);
</script>
So, in my opinion, whenever I click on either the value or the button itself, the value of the radiobutton should be written to the console. This works correctly for the button itself, but if I click on the label/description besides the button, it will always print "de" (the first item), no matter what I did (I also tried "switchRadioButtons(document.getElementById('other'));" with no effect).
Can anyone explain to my why this happens and maybe provide a solution?

You have all of your inputs inside the same label! If you click on it, it's gonna trigger the 1st element ('de'). It doesn't know that you wanted to trigger one of the other ones.
You need to have a separate label for each element.

add a group to your input
remove label enclosing inputs
autoclose input tags xHTML thingy...
Voilà it works :
http://jsfiddle.net/techunter/Z3fU7/
HTML
<label for="de">Deutch</label>
<input type="radio" name="lang" id="de" value="de" onclick="switchRadioButtons(this);" />
<label for="en">English</label>
<input type="radio" name="lang" id="en" value="en" onclick="switchRadioButtons(this);" />
<label for="other">Other</label>
<input type="radio" name="lang" id="other" value="other" onclick="switchRadioButtons(this);" />
<input type="text" id="language" value="" />
JS
function switchRadioButtons(element) {
console.log(element.value);
}