Develop Reference

Toggle checkboxes with radio button

Building on this answer I'm trying to use a radio button to check all checkboxes on toggle but if it's not toggled they should show unchecked or disabled. They control the layers on map the default should be all on and users can then remove them.
Here's the fiddle for what I've tried below;
$('input[value="energyRating"]').change(function() {
if ($(this).is(':checked')){ //radio is now checked
$('input[id="check2"]').prop('checked', true);
$('input[id="check"]').prop('checked', false);
}
else { //radio is now checked
$('input[id="check2"]').prop('checked', false);
$('input[id="check"]').prop('checked', false);
}
});
Clarification: in the fiddle if you click the extra radio button no checkboxes should be checked

it is better to handle with class name when u have number of items.please check the below code it might help you to select all and reset all.
$('.click').click(function() {
//select all radio is now checked
$('.event').prop('checked', true);
$('.reset').prop('checked', false);
});
$('.reset').click(function() {
//reset radio is now checked
$('.click').prop('checked', false);
$('.event').prop('checked', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">
<input type="radio" class="click" value="energyRating">select all<br>
<input type="radio" class="reset" value="extra">reset
</div>
<div id="b">
<input id ='check' type="checkbox" class="event" value="Bike1">I have a bike<br>
<input id ='check' type="checkbox" class="event" value="Car">I have a car <br>
<input id ='check2' type="checkbox" class="event" value="Bike">I have another bike<br>
<input id ='check2' type="checkbox" class="event" value="Car">I have another car
</div>

The id attribute of an HTML element should be unique, so the repeated use of check and check2 make your HTML invalid. I would just drop those id attributes.
One way to do what you need, and also avoid code repetition, is to mark the checkbox elements with data attributes which refer to the radiobutton for which it should be checked.
Here is how that would look:
$('input[name="sex"]').change(function() {
var selected = $('input[name="sex"]:checked').val();
$('input[name="vehicle"]').each(function () {
$(this).prop('checked', $(this).data("rating") === selected);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a">
<input type="radio" name="sex" value="energyRating">energyRating<br>
<input type="radio" name="sex" value="energyRatingByCount">energyRatingByCount<br>
<input type="radio" name="sex" value="extra">extra
</div>
<div id="b">
<input type="checkbox" data-rating="energyRating" name="vehicle" value="Bike1">I have a bike<br>
<input type="checkbox" data-rating="energyRating" name="vehicle" value="Car">I have a car <br>
<input type="checkbox" data-rating="energyRatingByCount" name="vehicle" value="Bike">I have another bike<br>
<input type="checkbox" data-rating="energyRatingByCount" name="vehicle" value="Car">I have another car
</div>

Two groups of checkboxes, if first one is checked second can not be

I have two "groups" of checkboxes (although the first group only contains one checkbox), but if user checks the checkbox from the first group I want to restrict the ability of checking the checkboxes from second group...
<div>
<h3>First group</h3>
<label>
<input type="checkbox" value="1" name="group1" />If checked, checks all the checkboxes in 2nd group</label>
<label>
</div>
<div>
<h3>Second Group</h3>
<label>
<input type="checkbox" class="radio" value="1" name="group2" />1</label>
<label>
<input type="checkbox" class="radio" value="1" name="group2" />1</label>
</div>

<div>
<h3>First group</h3>
<label>
<input type="checkbox" value="1" name="group1" id='Grp1'/>If checked, checks all the checkboxes in 2nd group</label>
<label>
</div>
<div>
<h3>Second Group</h3>
<label>
<input type="checkbox" class="radio Grp2" value="1" name="group2" />1</label>
<label>
<input type="checkbox" class="radio Grp2" value="1" name="group2" />1</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('#Grp1').change(function() {
if($(this).is(":checked"))
{
$('.Grp2').prop('disabled', true);
}
else
{
$('.Grp2').prop('disabled', false);
}
});
</script>

I've used a simple jQuery script to solve it.
initially it didn't exactly do what I wanted it to do, but I've managed to work around it with php as I had to make sure that if someone checked the checkbox from the second group that it didn't go to the database.
$('#checkbox1').click(function() {
if( $(this).is(':checked')) {
$("#checkbox2").hide();
} else {
$("#checksbox2").show();
}
});
As for php I simply used a ternary operator to make sure that if checkbox with id checkbox1 is checked then I want to ignore the rest of the checkboxes...
$smnrs = !empty($_POST['all']) ? explode(';', $_POST['all']) : $_POST['seminars'];
in this case $_POST['all'] refers to the first checkbox that if clicked it hides the div holding the other checkboxes.

Check-boxes with Radio-buttons quality

I need check-boxes list that has one quality of radio-buttons:
That you can check only one of them.
I don't want to use radio-buttons, becouse I need other qualities of check-boxes, like that you can un-check it by additional click.
Is there any simple way to do it?
I can use javascript, including knockout and jquery libraries.

DEMO
$(function() {
$(':checkbox').on('change',function() {
$(':checkbox[name=' + this.name + ']:checked').not(this).prop('checked',false);
});
});

HTML:
<fieldset>
<legend>Group1</legend>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
</fieldset>
<fieldset>
<legend>Group2</legend>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
</fieldset>
Checkbox Group exactly like a radio button group
jsfiddle:
Checkbox Group
Javascript:
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).attr("checked",false);
$(this).attr("checked",true);
});
Checkbox Group you can remove all checked.
jsfiddle:
Checkbox Group(can remove all checked)
Javascript:
$("input:checkbox").change(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).not(this).prop("checked",false);
$(this).prop("checked",!this.checked);
});

Select one checkbox row only in datatables

I want to be able to select only 1 checkbox at a time in Datatables.
In the example below, multiple rows can be selected. How can I go about only allowing one row to be selected at a time?
http://datatables.net/examples/api/form.html

You could use Radio buttons instead of checkboxes.
Example:
<input type="radio" name="fieldName" value="check1" />
<input type="radio" name="fieldName" value="check2" />
<input type="radio" name="fieldName" value="check3" />
<input type="radio" name="fieldName" value="check4" />
The "name" attribute is what groups the radio buttons together, the "value" attribute is what will differentiate them.

How to select first row of the first table in an html page using jQuery?
Selects one row in a given table.
You could use jQuery to achieve it.

You should use the radio button,
<form action="path/to/form_submit_script.php" method="get">
<input type="radio" name="red" value="Red" /> Red<br />
<input type="radio" name="blue" value="Blue" /> Blue<br />
<input type="radio" name="green" value="Green" /> Green<br />
<input type="submit" value="Submit">
</form>
Here is the working example jsfiddle example

var _MainDataTable = $('#dataTable').DataTable();
...
$("#dataTable").on('click', 'tr', function () {
if (_MainDataTable.$(".selected").length > 1) {
_MainDataTable.$(".selected").removeClass('selected');
$(this).addClass("selected");
}
});

JQuery: get radio button value

I have the following HTML:
HTML:
<input type="radio" name="abc" value="0" selected="selected" style="display:none" />
<input type="radio" name="abc" value="1" />1+
<input type="radio" name="abc" value="2" />2+
<input type="radio" name="abc" value="3" />3+
JQuery to get the selected radio button
$('input:radio[name=abc]:checked').val();
Why doesn't the code above work on page load, BEFORE a user selected a radio button? It's strange because the code above does work AFTER a user selected a radio button.
It seems to me that I have set the default radio button value to be 0, but if you
Meaning, if the radio button value is selected, return the selected value - otherwise, return 0 (when no value has been selected)

You are using the wrong attribute. For radio buttons you have to use the checked attribute and not the selected attribute.
<input type="radio" checked="checked">
or just:
<input type="radio" checked>

First correct the attribute to checked and remove selected attribute which is wrong and then use the following code.
t will get the selected value of the radiobutton at button click.
ex for list
$("#btn").click(function() {
$('input[type="radio"]:checked').val();
});

Radio has the attribute checked, not selected
<input type="radio" name="abc" value="0" checked="checked" style="display:none" />
<input type="radio" name="abc" value="1" />1+
<input type="radio" name="abc" value="2" />2+
<input type="radio" name="abc" value="3" />3+