Develop Reference

Make checkboxes required

I already looked to similar questions but I still can't figure out how to fix it. On my webpage, I have some radio checkboxes which I would like to be required before going to the next question.
I have the following partial code:
<p>
Select the option that fits most to you<br><br>
<label>
<input type="radio" name="typesport" value="teamsport" >
I prefer a teamsport</label><br>
<label>
<input type="radio" name="typesport" value="individual">
I prefer an individual sport</label><br>
</p>
Next question
Can someone help me with getting a javascript code, that actually works for all radio-boxes, where you could only go to the next question when 1 radio-box is selected?
Cheers,
Max
Edit: What I've tried so far is the following:
I added "required" to the label, so it looked like this:
<label><input type="radio" name="typesport" value="teamsport" required> I prefer a teamsport</label><br>
I also added the ID to the button:
Next question
Furthermore, I used this JS script:
$(document).ready(function () {
$('#checkBtn').click(function() {
checked = $("input[type=radio]:checked").length;
if(!checked) {
alert("You must check at least one radio.");
return false;
}
});
});
However, this works fine for only one question. When I add this to all the other questions, I still can go to the following question when I click on the button Next question, and that is not what I want.

Radio boxes are fairly simple in nature in that you should always have at least one option in a radio-group checked by default. Preferably a N/A or 'Please Select' option.
In which case you would want to validate against the 'Please Select' option instead:
//when user clicks <a> element
$(".next-button").click(function() {
//group on radio button name and test if checked
if ($("input[name='typesport']:checked").val() == 'select') {
alert('Nothing is checked!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Select the option that fits most to you<br><br>
<label><input type="radio" name="typesport" value="select" checked="true" > Please Select </label><br>
<label><input type="radio" name="typesport" value="teamsport" > I prefer a teamsport</label><br>
<label><input type="radio" name="typesport" value="individual"> I prefer an individual sport</label><br>
</p>
Next question
However
If you really want to validate that an option has been checked:
This should work:
//when user clicks <a> element
$(".next-button").click(function()
{
//group on radio button name and test if checked
if (!$("input[name='typesport']:checked").val()) {
alert('Nothing is checked!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Select the option that fits most to you<br><br>
<label><input type="radio" name="typesport" value="teamsport" > I prefer a teamsport</label><br>
<label><input type="radio" name="typesport" value="individual"> I prefer an individual sport</label><br>
</p>
Next question

HTML5 supports the required attribute for radio buttons. I did some searching and HTML5: How to use the "required" attribute with a "radio" input field has more detailed information about this attribute.

You can set a radio button checked by default by using the checked attribute.
To check if it's checked or not, use this code :
if ($('input[name=typesport]').attr('value') != undefined) {
//execute code when it is checked
} else {
//execute code when it's not checked
}

Using check-box in one column to disable check-box in another column

I have a table with two columns of check-boxes, Amend[] and Delete[]. On any row, by checking either one the other is disabled, preventing both being checked. This is my attempt:
var amend=document.getElementByName('Amend');
var del=document.getElementByName('Delete');
function Amend(){
for(x=0;x<amend.length;x++)
{
if(amend[x].checked)
{
del[x].disabled=disabled;
}
}
Any help appreciated.

You want radio buttons, not checkboxes:
<label><input type="radio" name="radio"> Option 1</label>
<label><input type="radio" name="radio"> Option 2</label>
No JavaScript required. Hooray for free functionality!

Got it working. The problem was getElementByName('amend'). It should be getElementsByName('amend[]'), I was referring to one variable called amend instead of an array of elements called amend[].

Overwrite checked radio button and check other one

I have two radio buttons. One is checked by default but I want to uncheck that one and check an other one by default.
So I have this HTML:
<div class="gui-radio">
<input type="radio" value="register" name="choise" id="new-register">
<label for="register">Register</label>
</div>
<div class="gui-radio">
<input type="radio" checked="checked" value="guest" name="choise" id="new-guest">
<label for="new-guest">Guest</label>
</div>
This all automatically generated. I need this to be done with Jquery.
So How do I uncheck the second one and check the first one?

jQuery 1.6+
You can check a checkbox by setting .prop('checked', true); and uncheck it by setting .prop('checked', false);.
$('#new-register').prop('checked', true);
$('#new-guest').prop('checked', false);
jQuery 1.5 and below
$('#new-register').attr('checked','checked');
$('#new-guest').removeAttr('checked');

This checks the first radio:
jQuery('input#new-register').prop('checked', true);
Also closing the inputs might be a good idea:
<div class="gui-radio">
<input type="radio" value="register" name="choise" id="new-register" />
<label for="register">Register</label>
</div>
<div class="gui-radio">
<input type="radio" checked="checked" value="guest" name="choise" id="new-guest" />
<label for="new-guest">Guest</label>
</div>
jsfiddle link

They are already connected by their name attributes, so all you need to do is make the first one checked - the second one will automatically become unchecked, because in a radio group only one can be selected.
This is how you make a radio/checkbox checked in jQuery:
$('#new-register').prop('checked', true);
Remember to use prop, not attr.
jsFiddle Demo

Two Checkboxes Being Checked at the Same Time

I have two checkboxes. What I need is when someone checks one of the boxes, it will automatically check the other one as well. And vice versa, if someone unchecks one of the boxes, it unchecks both. This is a bundle package on the form and they can not get one without the other.
<input type="checkbox" id="chk1" name="chk1" value="100">Voicemail<br />
<input type="checkbox" id="chk2" name="chk2" value="50">VM Support
Any help is greatly appreciated!

Why not this?
<input type="checkbox" id="chk1" name="chk1" value="100">
<label for="chk1">Voicemail and VM Support</label>

Assuming you want to only test these two checkboxes (and not every one on the page), you can use a jQuery Multiple Selector to access the onClick event for both. Using this you can test the checked status of the checkbox that was just clicked, and then assign that status of both checkboxes to match the one that was just clicked.
$('#chk1, #chk2').on('click', function(){
var checked = $(this).is(':checked');
$('#chk1, #chk2').attr('checked', checked);
});

Try this
$('#chk1 , #chk2').on('click', function(){
$('#chk1 , #chk2').attr('checked', $(this).is(':checked'))
});
FIDDLE
FIDDLE

javascript jquery radio button click

I have 2 radio buttons and jquery running.
<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second
Now, with a button I can set onClick to run a function. What is the way to make radio buttons run a function when I click on one of them?

You can use .change for what you want
$("input[#name='lom']").change(function(){
// Do something interesting here
});
as of jQuery 1.3
you no longer need the '#'. Correct way to select is:
$("input[name='lom']")

If you have your radios in a container with id = radioButtonContainerId you can still use onClick and then check which one is selected and accordingly run some functions:
$('#radioButtonContainerId input:radio').click(function() {
if ($(this).val() === '1') {
myFunction();
} else if ($(this).val() === '2') {
myOtherFunction();
}
});

<input type="radio" name="radio" value="creditcard" />
<input type="radio" name="radio" value="cash"/>
<input type="radio" name="radio" value="cheque"/>
<input type="radio" name="radio" value="instore"/>
$("input[name='radio']:checked").val()

this should be good
$(document).ready(function() {
$('input:radio').change(function() {
alert('ole');
});
});

There are several ways to do this. Having a container around the radio buttons is highly recommended regardless, but you can also put a class directly on the buttons. With this HTML:
<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>
you can select by class:
$(".shapeButton").click(SetShape);
or select by container ID:
$("#shapeList").click(SetShape);
In either case, the event will trigger on clicking either the radio button or the label for it, though oddly in the latter case (Selecting by "#shapeList"), clicking on the label will trigger the click function twice for some reason, at least in FireFox; selecting by class won't do that.
SetShape is a function, and looks like this:
function SetShape() {
var Shape = $('.shapeButton:checked').val();
//dostuff
}
This way, you can have labels on your buttons, and can have multiple radio button lists on the same page that do different things. You can even have each individual button in the same list do different things by setting up different behavior in SetShape() based on the button's value.

it is always good to restrict the DOM search. so better to use a parent also, so that the entire DOM won't be traversed.
IT IS VERY FAST
<div id="radioBtnDiv">
<input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/>
<input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/>
</div>
$("input[name='myButton']",$('#radioBtnDiv')).change(
function(e)
{
// your stuffs go here
});