I am creating a checkbox group like below. It will be increment for 20 to 30 groups.
Instead of write jQuery like below for each checkbox group, is it possible to make through for loop iteration?
I tried through loop, but its not working as expected.
$('.checkbox-1 .done-check').change(function() {
$('.checkbox-1 .done-check').prop('checked', false);
$(this).prop('checked', true);
});
$('.checkbox-2 .done-check').change(function() {
$('.checkbox-2 .done-check').prop('checked', false);
$(this).prop('checked', true);
});
$('.checkbox-3 .done-check').change(function() {
$('.checkbox-3 .done-check').prop('checked', false);
$(this).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check checkbox-1">
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
</label>
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
</label>
</div>
<div class="form-check checkbox-2">
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
</label>
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
</label>
</div>
<div class="form-check checkbox-3">
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
</label>
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
</label>
</div>
You do not need to loop at all. You just need to use contextual lookups correctly.
$('.done-check').on('change', function(){
if (this.checked) {
$(this).closest('div.form-check').find('.done-check').not(this).prop('checked', false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check checkbox-1">
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
</label>
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
</label>
</div>
<div class="form-check checkbox-2">
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
</label>
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
</label>
</div>
<div class="form-check checkbox-3">
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> Yes
</label>
<label class="form-check-label">
<input name="checklist-done" type="checkbox" class="form-check-input done-check"> No
</label>
</div>
When a checkbox is checked, you find the parent form-check wrapping the grouped checkboxes. You then find the nested checkboxes, exclude the one just checked, and then mark the rest unchecked.
Yes, iterating will be much more efficient. Also, let's clean up your selectors a little. Selectors like $('.checkbox-3 .done-check') work but are inefficient because jQuery reads them from right to left. Instead use $('.checkbox-3').find('.done-check').
For the loop:
var max = 30; // or how ever you determine it
for(var i = 1; i <= max; i++)
{
$('.checkbox-' + i).find('.done-check').change(function(){
$('.checkbox-' + i).find('.done-check').prop('checked',false);
$(this).prop('checked',true);
});
}
Now, I don't know why you have the two different lines there inside the function because they both target the same element but whatever your reason, that is one way to do the loop.
Related
i have a simple html form where i have like 50 questions, all the questions hasve ther own radio button options, something like below:
<h3 class="text-danger">1. Question 1</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 2 </label>
<h3 class="text-danger">2. Question 2</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 2 </label>
i want the user to complete all the questions,and only submit after completion, i did something like below:
$(function(){
$("input[type='radio']").change(function(){
$("input[type='submit']").prop("disabled", false);
});
});
<input type="submit" disabled="disabled"/>
however this is not accurate as the submit button enables if a user complete 1 question, can anyone please tell me how to accomplish this, thanks in advance
Make it simple by making one of the radio buttons selected
your code will look like
<h3 class="text-danger">1. Question 1</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault11" checked>
<label class="form-check-label" for="flexRadioDefault11">Option 1</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefaultq12">
<label class="form-check-label" for="flexRadioDefaultq12">Option 2 </label>
<h3 class="text-danger">2. Question 2</h3>
<input class="form-check-input" value="1" type="radio" name="q2" id="flexRadioDefaultq21" checked>
<label class="form-check-label" for="flexRadioDefaultq21"> Option 1 </label>
<input class="form-check-input" type="radio" value="2" name="q2" id="flexRadioDefaultq22">
<label class="form-check-label" for="flexRadioDefaultq22"> Option 2 </label>
$("#btn").on("click", function (e) {
e.preventDefault;
$(".radio").each(function (index) {
if (!$(this).is(":checked")) {
alert(index + "is uncheck");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<button id="btn">submit</button>
You need tu ose .each() method.
Each radio question should have a unique name so I changed them to q1,q2,q3. Even I added a wrapper for each question block. Whenever a question is answered, I loop each question block and check whether any block still remains unanswered. If any block(question) is unanswered, doEnable variable changes to false and loop break out.
$(function(){
$("input[type='radio']").change(function(){
let doEnable = true;
$(".form-check-input-wrap").each(function(){
if($(this).find("input[type='radio']:checked").length == 0){
doEnable = false;
return false;
}
});
if(doEnable) {
$("input[type='submit']").prop("disabled", false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="text-danger">1. Question 1</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault11">
<label class="form-check-label" for="flexRadioDefault11">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault12">
<label class="form-check-label" for="flexRadioDefault12">
Option 2 </label>
</div>
<h3 class="text-danger">2. Question 2</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q2" id="flexRadioDefault21">
<label class="form-check-label" for="flexRadioDefault21">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q2" id="flexRadioDefault22">
<label class="form-check-label" for="flexRadioDefault22">
Option 2 </label>
</div>
<h3 class="text-danger">3. Question 3</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q3" id="flexRadioDefault31">
<label class="form-check-label" for="flexRadioDefault31">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q3" id="flexRadioDefault32">
<label class="form-check-label" for="flexRadioDefault32">
Option 2 </label>
</div>
<input type="submit" disabled="disabled"/>
P.S- There are other similar questions, but their methods show an error message
I have a form with multiple checkbox values. A user may select one or more than one options.
<input type="radio" id="DecisionA" class="DecisionType" name="DecisionType" value="d1">
<input type="radio" id="DecisionB" class="DecisionType" name="DecisionType" value="d2">
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="1">
<label class="form-check-label" for="flexCheckDefault">Decision 1</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="2">
<label class="form-check-label" for="flexCheckDefault">Decision 2</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="3">
<label class="form-check-label" for="flexCheckDefault">Decision 3</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="4">
<label class="form-check-label" for="flexCheckDefault">Decision 4</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="other">
<label class="form-check-label" for="flexCheckDefault">Other Reasons</label>
<button class="submitDecision">Submit</button>
In JavaScript, I tried to send all the data onto another function as mentioned here.
$('.submitDecision').click(function(){
var decisionCheckboxes = new Array();
console.log(decisionCheckboxes);
var data = {};
data['DecisionType'] =$('input:radio[name=DecisionType]:checked').val();
$("input:checked").each(function() {
decisionCheckboxes.push($(this).val());
});
data['decisionComments']=decisionCheckboxes;
console.log(data);
saveDecision(data); -------------> saveDecision is the function
}
});
In the console, I am getting this, EVEN IF NO OPTION IS SELECTED
DecisionType:"3"
decisionComments: (9) ["1", "2", "3","4" ,"other", "on", "on", "on", "on", "on"]
Please tell me the problem
First, you are pushing all input rather than the only the checkbox. check below code.
$('.submitDecision').click(function(){
var decisionCheckboxes = [];
var data = {};
data['DecisionType'] =$('input:radio[name=DecisionType]:checked').val();
$("input.form-check-input:checked").each(function() {
if( $(this).val() == 'other' ){
console.log('conditions for other value');
}
decisionCheckboxes.push($(this).val());
});
data['decisionComments']=decisionCheckboxes;
console.log(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="DecisionA" class="DecisionType" name="DecisionType" value="d1">
<input type="radio" id="DecisionB" class="DecisionType" name="DecisionType" value="d2">
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="1">
<label class="form-check-label" for="flexCheckDefault">Decision 1</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="2">
<label class="form-check-label" for="flexCheckDefault">Decision 2</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="3">
<label class="form-check-label" for="flexCheckDefault">Decision 3</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="4">
<label class="form-check-label" for="flexCheckDefault">Decision 4</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="other">
<label class="form-check-label" for="flexCheckDefault">Other Reasons</label>
<button class="submitDecision">Submit</button>
I am currently trying to make a form where multiple things are required like name email etc i am not having any trouble sorting those ones out but when it comes to the check boxes i struggle to figure out how to make it so that two or more checkboxes are required to the submit the form this is the way i have been trying to do it. after checkbox.value i have tried <2. also here is the code for the checkboxes in html.
if (checkbox.value ) {
messages.push('Two intrests must be selected')
}
<div class="form-check form-check-column">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Sports" id="Box" value=1> Sports
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Reading" id="Box" value=1> Reading
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Hacking" id="Box" value=1> Hacking
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Gaming" id="Box" value=1> Gaming
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Other" id="Box" value=1 > Other
</label>
You can add a simple id to container of checkbox then for each checked checkbox plus a counter +1 for check if is equal or plus 2 like:
function Check()
{
var howmuch = 0;
var container = document.getElementById('container');
var checkbox = container.querySelectorAll('input[type="checkbox"]');
//You can use short without var like document.getElementById('container').querySelectorAll('input[type="checkbox"]')
checkbox.forEach(function(item) {
if(item.checked){howmuch += 1}
});
if(howmuch >= 2){
console.log('ok');
}else{
console.log('MUST BE 2 or +');
}
}
<div class="form-check form-check-column" id="container">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Sports" id="Box" value=1> Sports
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Reading" id="Box" value=1> Reading
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Hacking" id="Box" value=1> Hacking
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Gaming" id="Box" value=1> Gaming
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Other" id="Box" value=1 > Other
</label>
</div>
<button onClick="Check();">simulate form</button>
obviously you will change my console.log with an action like alert if is not ok and form submit if is ok (remember to use event.preventdefault() for prevent submit before check if all is ok)
var howmuch = 0;
var container = document.getElementById('container');
var checkbox = container.querySelectorAll('input[type="checkbox"]');
checkbox.forEach(function(item) {
if(item.checked){howmuch += 1}
});
if(howmuch < 2){
messages.push('Two to three intersts must be selected')
} else if (howmuch > 3) {
messages.push('You can only select three intrests max')
}
I am trying to get selected values of all the radio buttons and if one is not selected, then null value.
Here is my HTML code:
<div class="question m-2">
<div class="question-title">Question 1</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-1">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-1">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-1">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-1">Option d
</label>
</div>
</div>
<div class="question m-2">
<div class="question-title">Question 2</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-2">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-2">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-2">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-2">Option d
</label>
</div>
</div>
<div class="question m-2">
<div class="question-title">Question 3</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-3">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-3">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-3">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-3">Option d
</label>
</div>
</div>
I want to store all the answers of each question, if selected then the selected value, if not selected, then null value. Can anyone help me with jQuery code?
You can get the answers like this:
$("#submit").on("click", function() {
let questions = $(".question");
let answers = [];
let answer;
questions.each(function() {
if ($(this).find("input[type='radio']:checked").length) {
answer = $(this).find("input[type='radio']:checked").val();
} else {
answer = "null";
}
answers.push(answer);
});
console.log(answers);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question m-2">
<div class="question-title">Question 1</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-1">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-1">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-1">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-1">Option d
</label>
</div>
</div>
<div class="question m-2">
<div class="question-title">Question 2</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-2">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-2">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-2">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-2">Option d
</label>
</div>
</div>
<div class="question m-2">
<div class="question-title">Question 3</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="a" name="q-3">Option a
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="b" name="q-3">Option b
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="c" name="q-3">Option c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" value="d" name="q-3">Option d
</label>
</div>
</div>
<button id="submit">
Submit
</button>
You can get it with javascript as well
const questions = document.querySelectorAll('.question');
const answers = Array.from(questions).map(e => e.querySelector('input.form-
check - input: checked ').value);
In JQuery
const answers = $('.question input.form-check-input:checked').val();
I have 10 questions each having 4 radio buttons as options. I want to validate whether all questions have a radio button checked. And call javascript function on submit button onclick.
Please help me with the javascript function.
Can i use a 2d elements to target each radio button in each question in the javascript function.Please resolve the javascript issue.running this javascript i can only target the questions using the 1d array.
function validateForm() {
var radios = document.getElementsByClassName("surveyQuestions");
var formValid = false;
var i = 0;
while (formValid == false && i < radios.length) {
if (radios[i].checked) formValid = true;
i++;
}
if (formValid == false) alert("Must Check Option !!");
}
<form class="forward">
<div class="surveyQuestions">
<label>2.Who is your Favorite Forward ? </label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
<label class="form-check-label" for="exampleRadios1">
Lionel Messi
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Cristiano Ronaldo
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
<label class="form-check-label" for="exampleRadios3">
Neymar Jr
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" >
<label class="form-check-label" for="exampleRadios3">
Mohammed Salah
</label>
</div>
</div>
</form>
<form class="midfielder">
<div class="surveyQuestions">
<label>3.Who is your favourite Midfielder? </label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
<label class="form-check-label" for="exampleRadios1">
Toni Kroos
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Andreas Iniesta
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
<label class="form-check-label" for="exampleRadios3">
Kevin De Bruyne
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" >
<label class="form-check-label" for="exampleRadios3">
Paul Pogba
</label>
</div>
</div>
</form>
<form class="defender">
<div class="surveyQuestions">
<label>4.Who is your Favorite Defender ? </label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
<label class="form-check-label" for="exampleRadios1">
Sergio Ramos
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Gerard Pique
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" >
<label class="form-check-label" for="exampleRadios3">
Leonardo Bonucci
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option4" >
<label class="form-check-label" for="exampleRadios3">
Thiago Silva
</label>
</div>
</div>
</form>
Maybe you need to use classes to your radios. For example:
<input type="radio" class="checkthis group_01" id="group_01_item_01">
<input type="radio" class="checkthis group_01" id="group_01_item_02">
<input type="radio" class="checkthis group_01" id="group_01_item_03">
<input type="radio" class="checkthis group_01" id="group_01_item_04">
<input type="radio" class="checkthis group_02" id="group_02_item_01">
// ...and so on
After this you can select all radios with .checkthis class, and a group by .group_01 class, and an item with id.
Now you can use jQuery to find a selected from a group, like this:
var object_array = $('.group_01').find(':checked');
if (object_array.length > 0) {
// you have a selected element
} else {
// there isn't selected element
}
UPDATED:
Without jQuery, only native JavaScript:
var object_array = document.body.querySelector('.group_01:checked');
The if statement is the same.
You can try something like
Just modify your function something like below
function validateForm() {
var totalQue = document.getElementsByClassName("surveyQuestions").length;
var selectedAns = document.querySelectorAll("input[type='radio']:checked").length;
if(totalQue != selectedAns){
alert("Must Check Option !!");
return false;
}
}
This will give you all radio buttons which are selected.