We Keep Coding

Select only one checkbox HTML

I have a problem with checking only one checkbox... I tried two types of JS code.. But it doesn't work... To check by class, when u click on one element with class 'product-list' to deselect another... Have someone idea how to solve this?
HTML:
<div class="mg-toolbar">
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" type="checkbox" name="PDF" value="<?php echo $file_name; ?>">
<label for="file_1">SELECT</label>
</div>
</div>
JS Try 1:
<script type="text/javascript">
$('.product-list').click(function() {
$(this).siblings('input:checkbox').prop('checked', false);
);
</script>
JS Try 2:
<script type="text/javascript">
$('.product-list').on('change', function() {
$('.product-list').not(this).prop('checked', false);
});
</script>

If you want to ensure that only one item to be selected at once, then actually that's what radio buttons were invented for (rather than checkboxes). And you don't need any JS code to make that work.
Demo:
<div class="mg-toolbar">
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_1" type="radio" name="PDF" value="File1">
<label for="file_1">SELECT 1</label>
</div>
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_2" type="radio" name="PDF" value="File2">
<label for="file_2">SELECT 2</label>
</div>
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_3" type="radio" name="PDF" value="File3">
<label for="file_3">SELECT 3</label>
</div>
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_4" type="radio" name="PDF" value="File4">
<label for="file_4">SELECT 4</label>
</div>
</div>

change the #c01 and #c02 to the two check box ID's your doing this with.
I think this may do what you need it to do. If c01 checked, c02 is unchecked, and vice-versa
$("#c01").click(function(){
if($("#c01").is(':checked'))
$("#c02").prop("checked", false);
});
$("#c02").click(function(){
if($("#c02").is(':checked'))
$("#c01").prop("checked", false);
});

Showing and hiding divs with class

I have written the below script that shows and hides divs when a checkbox is clicked. It gets the checkbox value and then hides the div with that class. My problem is a div may be tagged with two checkbox values. If one of them is still ticked I'd still like the div to be shown rather than hidden as my script currently does. What is the way around that?
HTML
<fieldset class="simple-filter">
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
<label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
<label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="quad" value="quad" checked>
<label for="quad">Quad/Inline</label>
</div>
</fieldset>
<div class="simple-filter-items">
<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>
Script:
jQuery(document).ready(function($){
$( ".filter-click" ).change(function() {
checkboxval = $(this).val();
$(".simple-filter-items").find("." + checkboxval).toggle();
});
});
Fiddle is here https://jsfiddle.net/h5as3cwb/

You can use each loop to iterate through checked checkboxes and show divs where checkbox is checked
Demo Code :
jQuery(document).ready(function($) {
$(".filter-click").change(function() {
//hide all div
$(".simple-filter-items div").hide()
//loop throgh checked checkboxes
$(".simple-filter input[type=checkbox]:checked").each(function() {
//show them
$(".simple-filter-items").find("." + $(this).val()).show();
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="simple-filter">
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
<label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
<label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="quad" value="quad" checked>
<label for="quad">Quad/Inline</label>
</div>
</fieldset>
<div class="simple-filter-items">
<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>

This solution is very similar to #Swati's but uses the .filter() and .map() methods:
$( ".filter-click" ).change(function() {
const checked = $('.filter-click:checked').map((i,c) => c.value).get();
$('.simple-filter-items > div').hide()
.filter(checked.map(c => `.${c}`).join(',')).show();
});
jQuery(document).ready(function($){
$( ".filter-click" ).change(function() {
const checked = $('.filter-click:checked').map((i,c) => c.value).get();
$('.simple-filter-items > div').hide()
.filter(checked.map(c => `.${c}`).join(',')).show();
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="simple-filter">
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="bmx" value="bmx" checked>
<label for="bmx">BMX</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="scooter" value="scooter" checked>
<label for="scooter">Scooter</label>
</div>
<div class="filter-wrap">
<input type="checkbox" class="filter-click" name="quad" value="quad" checked>
<label for="quad">Quad/Inline</label>
</div>
</fieldset>
<div class="simple-filter-items">
<div class="bmx scooter">box 1</div>
<div class="bmx">box 2</div>
<div class="quad">box 3</div>
</div>

Radio boxes won't validate

I have a series of radio groups, all with the same name because they are dynamically generated. I want them to be required, but nothing I'm doing is making that happen (including trying to count checked items with jquery).
I'm guessing this is due to some sort of ID conflict?
I have the radios marked as "required" in the HTML.
Or could this be due to the way I'm processing with jquery?
<div class="benchmark-question-title"><?php echo $atts['content']; ?></div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<form class="benchmark-question-binary">
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="yes" required>Yes</label>
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="no" checked required>No</label>
</form>
</div>
<div class="col-sm-6 col-xs-12">
<span class="benchmark-move-forward italic">If yes, move on to the next movement</span>
</div>
</div>
When I attempt to see if any radio groups with name "yesno" are NOT checked with jquery, it doesn't appear to recognize the groups and counts every option individually.
$('input:radio[name=yesno]').each(function(){
if ( $(this).is(":checked") ){
console.log('checked')
}
else{
console.log('not checked');
}
});
$('input:radio[name=yesno]').each(function() {
if ($(this).is(":checked")) {
console.log('checked')
} else {
console.log('not checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="benchmark-question-title">
<?php echo $atts['content']; ?>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<form class="benchmark-question-binary">
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="yes" required>Yes</label>
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="no" checked required>No</label>
</form>
</div>
<div class="col-sm-6 col-xs-12">
<span class="benchmark-move-forward italic">If yes, move on to the next movement</span>
</div>
</div>

no need to itterate through, just check the checked state of the group.
$("input:radio[name='yesno']").is(":checked")
or
$("input:radio[name='yesno']:checked").val()
Using JQuery to check if no radio button in a group has been checked

I'm not following what exactly you're trying to accomplish, however if you're looking for the default functionality of only being able to select one radio at a time, you just need to add brackets to the name. Doing this, you also won't have to do any validation if you mark one of the radios as default (as they can't be deselected).
<input type="radio" name="yesno[]" value="yes" />
<input type="radio" name="yesno[]" value="no" checked />

You can use the form to base an event on. Here I used both the change and a validate event - so you can trigger the validate whenever you wish (like on a form submit?) and this shows an example how to do so.
$('form.benchmark-question-binary')
.on("change validate", 'input[type="radio"][name="yesno"]', function(event) {
let thisform = $(event.delegateTarget);
let radios = thisform.find('input[type="radio"][name="yesno"]');
let rChecked = radios.filter(":checked");
console.log(radios.length > rChecked.length);
console.log(radios.length, rChecked.length)
})
// now trigger the first one on startup
.find('input[type="radio"][name="yesno"]').first().trigger('validate');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="benchmark-question-title">
Am I the hero?
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<form class="benchmark-question-binary">
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="yes" required>Yes</label>
<label class="benchmark-yes-no"><input type="radio" name="yesno" value="no" checked required>No</label>
</form>
</div>
<div class="col-sm-6 col-xs-12">
<span class="benchmark-move-forward italic">If yes, move on to the next movement</span>
</div>
</div>

Change radio input value on click ( change it back actually )

Change radio input selection on on click on selectx2 div:
<div class="row">
<div class="box">
<div class="inputoptions">
<span><input type="radio" name="abc" value="x1" checked="checked" class="y1" /> x1</span>
<span><input type="radio" name="abc" value="x2" class="y2" /> x2</span>
<span><input type="radio" name="abc" value="x3" class="y3" /> x3</span>
</div>
<div class="selectx2">select x2</div>
<div class="clear"></div>
</div>
Here is my JavaScript to change/select x2:
$('.selectx2').on('click', function(e) {
$(this).closest('.box').children('.inputoptions').children('.y2').prop('checked', true);
});
Where did I make the mistake?

As you are using .children() it find the immediate child of element and y2 is not immediate child of inputoptions.
You can use .find()
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
Use
$(this)
.closest('.box')
.children('.inputoptions')
.find('.y2') //Use find here instead of children
.prop('checked', true);
OR
$(this)
.closest('.box')
.find('.inputoptions .y2')
.prop('checked', true);
$(document).ready(function() {
$('.selectx2').on('click', function(e) {
$(this).closest('.box').find('.inputoptions .y2').prop('checked', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="box">
<div class="inputoptions">
<span><input type="radio" name="abc" value="x1" checked="checked" class="y1" /> x1</span>
<span><input type="radio" name="abc" value="x2" class="y2" /> x2</span>
<span><input type="radio" name="abc" value="x3" class="y3" /> x3</span>
</div>
<div class="selectx2">select x2</div>
<div class="clear"></div>
</div>
</div>

Radiobutton on selection do a function

I have two radio buttons. If the user chose one of them i would like my code to execute one particular function. I need to get the value from the radio button selection and push it to my function on the server-side as "valueButton". Guess i need a function on the client-side, but how should that look?
The buttons (client-side):
<div>
<input type="radio" name="origin" id="radio-origin-1" value="ID1">
<label for="radio-origin-auto">Grupp 1</label>
</div>
<div>
<input type="radio" name="origin" id="radio-origin-2" value="ID2">
<label for="radio-origin-en">Grupp 2</label>
</div>
The functions (server-side):
function dataSelect(valueButton){
if (valueButton == "ID1") {
ID1(); }
else if (valueButton == "ID2") {
ID2(); }
}
function ID1(){
MailApp.sendEmail("test.acc#outlook.com", "subjects", GetDataFromSpreadsheet());}
function ID2(){
MailApp.sendEmail("test.acc2#outlook.com", "subjects", GetDataFromSpreadsheet());}

HTML Code
<div>
<input type="radio" name="origin" id="radio-origin-1" value="ID1" onChange="dataSelect(this.value);">
<label for="radio-origin-auto">Grupp 1</label>
</div>
<div>
<input type="radio" name="origin" id="radio-origin-2" value="ID2" onChange="dataSelect(this.value);">
<label for="radio-origin-en">Grupp 2</label>
</div>