Radio boxes won't validate - javascript

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>

Related

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);
});

How to display only two buttons when radio button is checked?

I have a form that implements 3 buttons. Each button offers a different option for the user to select. The page only renders two of the buttons, the last one is hidden. I want to change the ones that display depending on the radio button input.
This is the HTML document that I am working with:
.hidden{
display: none;
}
<label for="pay">Payment Option</label>
<div class="row check">
<div class="col-sm-6">
<input type="radio" id="gcash" name="pay" value="gcash" checked="checked"/>
<label for="gcash" class="pay">Gcash</label>
</div>
<div class="col-sm-6">
<input type="radio" id="walk" name="pay" value="unpaid"/>
<label for="walk" class="pay">Walk In</label>
</div>
</div>
<div class="buttons">
Back
Proceed payment
<input type="submit" class="res-btn hidden" name="btn-submit" value="Submit">
</div>
radio.addEventListener('change', function() {
console.log(this.value)
});
use this handler for getting data of radio
then, find your element and use
element.classList.toggle("hidden");
for toggle class name, which uses in your css

How to check radiobox situation without a button?

i am designing a website. On the page there is a question with radiobox answers. I have 2 questions
1- I want to show another div that depends on the radiobox answer. Every radiobox needs to have different div target. Divs are hidden default, needs to show with radiobutton trigger.
2- Radiobox check is not gonna happen with a "confirm" button. I want to show the next div automatically when a radiobox is selected.
I think i need a check function but still cant make a working one. Help please
I tried something like this
function check() {
document.getElementById("radiobutton").checked = true;
}
My main question div:
<div class="card">
<form action="" method="post">
<div class="container-fluid">
<div class="row">
<div class="col"><input class="CoktanSecmeli" type="radio" name="radio" value="Radio1"><br>Text<p class="SecimAciklama">Text</p></div>
<div class="col"><input class="CoktanSecmeli" type="radio" name="radio" value="Radio2"><br>Text<p class="SecimAciklama">Text</p></div>
<div class="col"><input class="CoktanSecmeli" type="radio" name="radio" value="Radio2"><br>Text<p class="SecimAciklama">Text</p></div>
</div>
</div>
</form>
</div><!----card div--->
add an onclick event to your radio button input and then write a little function to show and hide your divs: (this could, of course, be simplified with jquery or something)
<label><input type="radio" name="radioGroup" onclick="showContent(this, 1)" /> Option 1</label>
<label><input type="radio" name="radioGroup" onclick="showContent(this, 2)" /> Option 2</label>
<div id="content1" style="display: none">Content for 1</div>
<div id="content2" style="display: none">Content for 2</div>
showContent(radioEle, id){
hideAll()
document.getElementById('content' + id).style.display = radioEle.checked ? 'block' : 'none'
}
hideAll(){
document.getElementById('content1').style.display = 'none'
document.getElementById('content2').style.display = 'none'
}
This bit of javascript will add an event listener for input on your radio buttons and then you can do whatever you want when they are selected. If you show us the divs you are displaying, I could help with that as well.
document.querySelectorAll(".CoktanSecmeli").forEach(function(item) {
item.addEventListener("input", function() {
console.log(this.value);
//select div and display it
});
});
<div class="card">
<form action="" method="post">
<div class="container-fluid">
<div class="row">
<div class="col">
<input class="CoktanSecmeli" type="radio" name="radio" value="Radio1"><br>Text<p class="SecimAciklama">Text</p></div>
<div class="col"><input class="CoktanSecmeli" type="radio" name="radio" value="Radio2"><br>Text<p class="SecimAciklama">Text</p></div>
<div class="col"><input class="CoktanSecmeli" type="radio" name="radio" value="Radio3"><br>Text<p class="SecimAciklama">Text</p></div>
</div>
</div>
</form>
</div><!----card div--->
Thanks for all answers, i finally did it! I know this is little but my js knowladge is zero.
<form>
<div class="container-fluid">
<div class="row">
<div class="col"><input class="CoktanSecmeli" type="radio" name="radio" onclick="CheckFunc()" id="Choice1" value="Radio 1"><br>TEXT<p class="SecimAciklama">TEXT</p></div>
<div class="col"><input class="CoktanSecmeli" type="radio" name="radio" onclick="CheckFunc()" id="Choice2" value="Radio 2"><br>TEXT<p class="SecimAciklama">TEXT</p></div>
</div>
</div>
</form>
<script>
function CheckFunc(){
if(document.getElementById("Radio1").checked) {
document.getElementById("XXX").style.display = "block";
document.getElementById("YYY").style.display = "none";
}else if(document.getElementById("Dizustu").checked) {
document.getElementById("YYY").style.display = "block";
document.getElementById("XXX").style.display = "none";
}
}
</script>

How to reset all radio buttons except for the one with a checked attribute?

I am attempting to reset a form field by wiping all checked properties and then applying the checked property back to the one with a "checked = 'checked'"attribute.
However, I'm not sure how to only select the element that passes my if statement, as console.log(thingo) is logging all three checkboxes.
$('a').click(function () {
if ($(this).parents('.form-field').find('.form-check-input').length != 0) { // does the revert button belong to a group with radio button inputs?
$(this).parents('.form-field').find('.form-check-input').prop('checked', false); //clear all checkboxes
var thingo = $(this).parents('.form-field').find('.form-check-input'); //set checkboxes to thingo
if (thingo.attr('checked') != null) {
console.log(thingo);
thingo.prop('checked', true); //attempt to set all checkboxes with attribute checked to be checked
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="form-group form-field">
<label class="form-check-label">
Sex
<span>[Revert]</span>
</label>
<div class="form-check">
<input type="radio" class="form-check-input" value="0" checked="checked">
<label class="form-check-label">Male</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" value="1">
<label class="form-check-label">Female</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" value="2">
<label class="form-check-label">Unclear</label>
</div>
</div>
This can be quite simply solved by using Jquery's attribute selector. All I have to do is:
$(this).parents('.form-field').find('.form-check-input').prop("checked", false);
//^this line clears all existing checks
$(this).parents('.form-field').find("[checked = 'checked']").prop("checked", true);
//^this line finds the checked attribute with the attribute selector and sets it to checked
$('button').on('click',function () {
var formField = $(this).parents('.form-field');
var formFieldInputs = formField.find('.form-check-input');
if (formFieldInputs.length){
formFieldInputs.prop("checked", false); //clear all checkboxes
formField.find('.form-check-input-default').prop("checked", true);
}
});
HTML format, just add a default class
<div class="form-group form-field">
<label class="form-check-label">
Sex
<span>[<button>Revert</button>]</span>
</label>
<div class="form-check">
<input type="radio" class="form-check-input form-check-input-default" value="0" checked />
<label class="form-check-label">Male</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" value="1" />
<label class="form-check-label">Female</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" value="2" />
<label class="form-check-label">Unclear</label>
</div>
</div>
Some elements here:
Use button instead of a. Clicking on a button does do something though, when used in its natural environment
Use jQuery.on instead of jQuery.click see : Difference between .on('click') vs .click()
For checked attribute see : What's the proper value for a checked attribute of an HTML checkbox?
you don't need to write checked="checked" but its actually only checked
when you want some button to be true by default you just need to add checked
refer this link once:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
I think this can help you

How will I make an If College is Check then this Course would be in the dropdown?

So I am trying to do an that If the College is selected in the checkbox then the college course would show like
BS-IT,
BS-IT-DA,
BS-CS
in the drop-down
else if the senior high is check then the strand would show
GAS,
IT,
CS.
I don't know if it is required with the JavaScript or
J-Query
<div class="form-group right">
<label class="label-title">Status</label>
<div>
<label><input type="checkbox">College Student</label>
<label><input type="checkbox" class="senior-high" >Senior High</label>
</div>
</div>
<div class="horizontal-group">
<div class="form-group left">
<label for="">Course</label>
<select id="Course"></select>
</div>
</div>
//first add id="collage" on collage checkbox and add class="checkbox" on all checkbox add senior_highcheckbox id on senior hs checkbox
$(document).on('click','.checkbox'function(){
if($('#college').is('checked')){
$('#course').append(`<option>BS-IT </option>
<option>BS-IT-DA</option>
<option>BS-CS</option>`);
$('#senior_highcheckbox').attr('checked',false);
}else{
$('#course').append(`<option>GAS</option>
<option>IT</option>
<option>CS</option>`);
$('#college').attr('checked',false);
}
})
I've amended your HTML slightly so I can find the ID with jQuery. What you want to do is to listen out for the checkbox with Jquery and then check its ID attribute. If the attribute is equal to 'college' then append the first list of items. Otherwise it must be the other checkbox so append the others.
$(':checkbox').click(function() {
if ($(this).attr('id') === 'college') {
$('#Course').append($('<option></option>').html('BS-IT'), $('<option></option>').html('BS-IT-DA'), $('<option></option>').html('BS-CS'));
} else {
$('#Course').append($('<option></option>').html('GAS'), $('<option></option>').html('IT'), $('<option></option>').html('CS'));
}
$(':checkbox').attr("disabled", true);
});
$('#cancel').click(function() {
$(':checkbox').prop("checked", false);
$(':checkbox').attr("disabled", false);
$('#Course').empty();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group right">
<label class="label-title">Status</label>
<div>
<input type="checkbox" id="college" name="college">
<label for="college">College Student</label>
<input type="checkbox" id="senior-high" name="senior-high">
<label for="senior-high">Senior High</label>
</div>
</div>
</div>
<div class="horizontal-group">
<div class="form-group left">
<label for="">Course</label>
<select id="Course"></select>
</div>
<button id="cancel">Cancel</button>
</div>

Categories