function toggle(source) {
checkboxes = document.getElementsByName('options[]');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
<form class="unsubscribe_form" action="process.php" method="post">
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-1" value="Option1">
<label for="checkbox-1-1"></label>Option 1
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-2" value="Option2">
<label for="checkbox-1-2"></label>Option 2
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-3" value="Option2">
<label for="checkbox-1-3"></label>Option 3
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-4" value="Option3">
<label for="checkbox-1-4"></label>Option 4
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-5" value="Option3">
<label for="checkbox-1-5"></label>Option 5
<input type="checkbox" class="unsubscribe-checkbox" id="checkbox-1-6" value="All" onClick="toggle(this)" />
<label for="checkbox-1-6"></label>All
<br>
<input type="submit" name="formSubmit" value="Unsubscribe" />
</form>
When I check the All checkbox, of course, it will mark all the checkboxes, but once I uncheck one checkbox, the All checkbox is still checked. This should be unchecked. How should I do that using JS?
You will need to add onchange event handlers to every checkbox and check inside if the "All" checkbox should be checked (all checkboxes are selected) or unchecked (at least one is deselected). For example like this:
var checkboxes = [].slice.call(document.getElementsByName('options[]')),
allCheckbox = document.querySelector('input[value="All"]');
checkboxes.forEach(function(checkbox) {
checkbox.onchange = function() {
if (!this.checked) {
allCheckbox.checked = false;
}
else {
var checked = checkboxes.filter(function(check) {
return check.checked;
});
if (checked.length === checkboxes.length) {
allCheckbox.checked = true;
}
}
};
});
function toggle(source) {
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
<form class="unsubscribe_form" action="process.php" method="post">
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-1" value="Option1">
<label for="checkbox-1-1"></label>Option 1
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-2" value="Option2">
<label for="checkbox-1-2"></label>Option 2
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-3" value="Option2">
<label for="checkbox-1-3"></label>Option 3
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-4" value="Option3">
<label for="checkbox-1-4"></label>Option 4
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-5" value="Option3">
<label for="checkbox-1-5"></label>Option 5
<input type="checkbox" class="unsubscribe-checkbox" id="checkbox-1-6" value="All" onClick="toggle(this)" />
<label for="checkbox-1-6"></label>All
</form>
Note that I converted checkboxes collection to array with [].slice.call in order to use convenient array methods. Simple for loops can be used instead.
I'd suggest the following:
function toggle() {
// getting a reference to all the 'name="option[]" elements:
var options = document.getElementsByName('options[]'),
// a reference to the 'all' checkbox:
all = document.getElementById('checkbox-1-6');
// if the changed checkbox is the 'all':
if (this === all) {
// we iterate over all the options checkboxes (using
// Array.prototype.forEach()):
Array.prototype.forEach.call(options, function(checkbox) {
// and we set their checked property to the checked property
// state of the 'all' checkbox:
checkbox.checked = all.checked;
});
} else {
// otherwise we set the 'all' checkbox to the state of
// the Boolean returned by Array.prototype.every(),
// which returns true if all checkboxes evaluate to
// the condition within the function, otherwise false:
all.checked = Array.prototype.every.call(options, function(checkbox) {
return checkbox.checked;
});
}
}
// getting a NodeList of all the elements of 'class="unsubscribe-checkbox"':
var options = document.querySelectorAll('.unsubscribe-checkbox');
// iterating over them, again with Array.prototype.forEach()
// and assigning a change event-listener, which will execute the
// name function:
Array.prototype.forEach.call(options, function(opt) {
opt.addEventListener('change', toggle);
});
function toggle() {
var options = document.getElementsByName('options[]'),
all = document.getElementById('checkbox-1-6');
if (this === all) {
Array.prototype.forEach.call(options, function(checkbox) {
checkbox.checked = all.checked;
});
} else {
all.checked = Array.prototype.every.call(options, function(checkbox) {
return checkbox.checked;
});
}
}
var options = document.querySelectorAll('.unsubscribe-checkbox');
Array.prototype.forEach.call(options, function(opt) {
opt.addEventListener('change', toggle);
});
<form class="unsubscribe_form" action="process.php" method="post">
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-1" value="Option1">
<label for="checkbox-1-1"></label>Option 1
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-2" value="Option2">
<label for="checkbox-1-2"></label>Option 2
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-3" value="Option2">
<label for="checkbox-1-3"></label>Option 3
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-4" value="Option3">
<label for="checkbox-1-4"></label>Option 4
<input type="checkbox" class="unsubscribe-checkbox" name="options[]" id="checkbox-1-5" value="Option3">
<label for="checkbox-1-5"></label>Option 5
<input type="checkbox" class="unsubscribe-checkbox" id="checkbox-1-6" value="All" />
<label for="checkbox-1-6"></label>All
<br>
<input type="submit" name="formSubmit" value="Unsubscribe" />
</form>
You may notice that I've removed the onClick attribute from the 'all' checkbox, in preference of unobtrusive JavaScript, where the event-handlers are assigned via the JavaScript itself (which ordinarily makes for more easily-maintained code, as the arguments to be passed to a given function are assigned in the code itself, rather than having to be separately updated in the HTML).
References:
Array.prototype.every().
Array.prototype.forEach().
document.getElementsByName().
document.getElementById().
document.querySelectorAll().
EventTarget.addEventListener().
Function.prototype.call().
Related
In my project I want change src part (ar-button's src) related to my radio buttons check.
For ex: When you check "Option 1" I want to change src part on ar-button. Than when you check Option3x(with checked option1 and option1x) I want to change src again.
I mean for all 64 combination of checks I want to change src.
Any help or suggestion would be great!
Thanks..
<label>
<input type="radio" id="diffuse" name="kumas" value="textues/kumas/2/pgwfpjp_2K_Albedo.jpg"checked>
Option1
</label>
<label>
<input type="radio"id="adiffuse" name="kumas" value="textues/kumas/1/oi2veqp_2K_Albedo.jpg">
Option 2
</label>
<label>
<input type="radio" id="bdiffuse"name="kumas" value="textues/kumas/3/sjfvce3c_2K_Albedo.jpg">
Option 3
</label>
<label>
<input type="radio" id="cdiffuse"name="kumas" value="textues/kumas/4/sjfvcjzc_2K_Albedo.jpg">
Option 4
</label>
<br><br>
<label>
<input type="radio" id="diffuse1" name="kol" value="textues\kol\1\teqbcizc_2K_Albedo.jpg" checked>
Option 1x
</label>
<label>
<input type="radio" id="adiffuse1" name="kol" value="textues\kol\2\tfjbderc_2K_Albedo.jpg">
Option 2x
</label>
<label>
<input type="radio" id="bdiffuse1"name="kol" value="textues\kol\3\tcnodi3c_2K_Albedo.jpg">
Option 3x
</label>
<label>
<input type="radio" id="cdiffuse1"name="kol" value="textues\kol\4\tcicdebc_2K_Albedo.jpg">
Option 4x
</label>
</div>
</div>
</div>
<br><br>
<label>
<input type="radio" id="diffuse2" name="dugme" value="textues\metal\1\scksebop_2K_Albedo.jpg" checked>
Option 1z
</label>
<label>
<input type="radio" id="adiffuse2" name="dugme" value="textues\metal\2\se4objgc_2K_Albedo.jpg">
Option 2z
</label>
<label>
<input type="radio" id="bdiffuse2"name="dugme" value="textues\metal\3\se4pcbbc_2K_Albedo.jpg">
Option 3z
</label>
<label>
<input type="radio" id="cdiffuse2"name="dugme" value="textues\metal\4\shkxcgfc_2K_Albedo.jpg">
Option 4z
</label>
<br><br>
<ar-button
id="change" src="https://basebros.com/models/ar_base_tekli_koltuk_3d.glb"
id="change2 ios-src="https://basebros.com/models/ar_base_tekli_koltuk_3d.usdz"
title="3D-AR by BASE">
<img class="arbuttonicon" src="Assets/evindebutton.png" width="170px" alt="AR-icon">
</ar-button>
Try using this code:
const kumas = document.getElementsByName("kumas");
const kol = document.getElementsByName("kol");
const dugme = document.getElementsByName("dugme");
const arButton = document.querySelector("ar-button");
let sources = [[[],[],[],[]],[[],[],[],[]],[[],[],[],[]],[[],[],[],[]]]; /* Fill this with the sources. The first element is if the first option for kumas is selected, the second is for if the second option is selected, etc. The elements inside those elements are for each of the different options for kol, and the elements inside those elements are for each of the different options for dugme. */
function foo() {
let kumasSelected;
let kolSelected;
let dugmeSelected;
for(let i of kumas) {
if(i.checked) {
kumasSelected = kumas.indexOf(i);
}
}
for(let i of kol) {
if(i.checked) {
kolSelected = kol.indexOf(i);
}
}
for(let i of dugme) {
if(i.checked) {
dugmeSelected = dugme.indexOf(i);
}
}
arButton.src = sources[kumasSelected][kolSelected][dugmeSelected];
}
Run the function each time you want to update the source.
<label>
<input type="radio" id="diffuse" name="kumas" value="textues/kumas/2/pgwfpjp_2K_Albedo.jpg"checked>
Option1
</label>
<label>
<input type="radio"id="adiffuse" name="kumas" value="textues/kumas/1/oi2veqp_2K_Albedo.jpg">
Option 2
</label>
<label>
<input type="radio" id="bdiffuse"name="kumas" value="textues/kumas/3/sjfvce3c_2K_Albedo.jpg">
Option 3
</label>
<label>
<input type="radio" id="cdiffuse"name="kumas" value="textues/kumas/4/sjfvcjzc_2K_Albedo.jpg">
Option 4
</label>
<br><br>
<label>
<input type="radio" id="diffuse1" name="kol" value="textues\kol\1\teqbcizc_2K_Albedo.jpg" checked>
Option 1x
</label>
<label>
<input type="radio" id="adiffuse1" name="kol" value="textues\kol\2\tfjbderc_2K_Albedo.jpg">
Option 2x
</label>
<label>
<input type="radio" id="bdiffuse1"name="kol" value="textues\kol\3\tcnodi3c_2K_Albedo.jpg">
Option 3x
</label>
<label>
<input type="radio" id="cdiffuse1"name="kol" value="textues\kol\4\tcicdebc_2K_Albedo.jpg">
Option 4x
</label>
</div>
</div>
</div>
<br><br>
<label>
<input type="radio" id="diffuse2" name="dugme" value="textues\metal\1\scksebop_2K_Albedo.jpg" checked>
Option 1z
</label>
<label>
<input type="radio" id="adiffuse2" name="dugme" value="textues\metal\2\se4objgc_2K_Albedo.jpg">
Option 2z
</label>
<label>
<input type="radio" id="bdiffuse2"name="dugme" value="textues\metal\3\se4pcbbc_2K_Albedo.jpg">
Option 3z
</label>
<label>
<input type="radio" id="cdiffuse2"name="dugme" value="textues\metal\4\shkxcgfc_2K_Albedo.jpg">
Option 4z
</label>
<br><br>
<ar-button
src="https://basebros.com/models/ar_base_tekli_koltuk_3d.glb"
title="3D-AR by BASE">
<img class="arbuttonicon" src="Assets/evindebutton.png" width="170px" alt="AR-icon">
</ar-button>
<script>
const kumas = document.getElementsByName("kumas");
const kol = document.getElementsByName("kol");
const dugme = document.getElementsByName("dugme");
const arButton = document.querySelector("ar-button");
let sources = [[["https://basebros.com/models/ar_base_ayakkabi.glb"],["https://basebros.com/models/ar_base_camasir_makinesi_3d.glb"],["https://basebros.com/models/ar_base_kahve_makinesi_3d.glb"],["https://basebros.com/models/ar_base_nintendo.glb"]],[[],[],[],[]],[[],[],[],[]],[[],[],[],[]]]; /* Fill this with the sources. The first element is if the first option for kumas is selected, the second is for if the second option is selected, etc. The elements inside those elements are for each of the different options for kol, and the elements inside those elements are for each of the different options for dugme. */
function foo() {
let kumasSelected;
let kolSelected;
let dugmeSelected;
for(let i of kumas) {
if(i.checked) {
kumasSelected = kumas.indexOf(i);
}
}
for(let i of kol) {
if(i.checked) {
kolSelected = kol.indexOf(i);
}
}
for(let i of dugme) {
if(i.checked) {
dugmeSelected = dugme.indexOf(i);
}
}
arButton.src = sources[kumasSelected][kolSelected][dugmeSelected];
}
</script>
Scenario :
I have a vote page, you have to select 3 of 4 candidates from the list.
Needs :
I need to make the last checkbox disabled after checking 3 of them (4).
Code :
HTML
<input class="cb" type="checkbox" name="condidate" value="1" onchange="cbChange(this)" />
<input class="cb" type="checkbox" name="condidate" value="2" onchange="cbChange(this)"/>
<input class="cb" type="checkbox" name="condidate" value="3" onchange="cbChange(this)"/>
<input class="cb" type="checkbox" name="condidate" value="4" onchange="cbChange(this)"/>
JS
function cbChange(obj) {
var cbs = document.getElementsByClassName("cb");
for (var i = 0; i < cbs.length - 3; i++) {
cbs[i].disabled = true;
}
obj.disabled = false;
}
Question :
How Can I make the last choice disabled after selecting the 3 others.
you need to call cbChange on click event of checkboxes.
function cbChange(obj) {
var cbs = document.getElementsByClassName("cb");
var checkCount = 0;
for (var i = 0; i < cbs.length; i++) {
if (cbs[i].checked === true)
checkCount++;
cbs[i].disabled = false;
}
if (checkCount >= 3){
for (var i = 0; i < cbs.length; i++) {
if (cbs[i].checked === false)
cbs[i].disabled = true;
}
}
}
<input class="cb" type="checkbox" name="condidate" value="1" onclick="cbChange(this)"/>
<input class="cb" type="checkbox" name="condidate" value="2" onclick="cbChange(this)"/>
<input class="cb" type="checkbox" name="condidate" value="3" onclick="cbChange(this)"/>
<input class="cb" type="checkbox" name="condidate" value="4" onclick="cbChange(this)"/>
When one of the checkboxes has changed, count the number that are unchecked. If there is only one, you can disable it; otherwise, if one is disabled, it must be re-enabled.
I'm just trying to return true/false in one my my jquery methods depending on the check of a 2 radio buttons and if it's selected or not
I've tried several things but have not been able to get this right, it still submit the form without giving error that the buttons are not selected.
HTML Code
<label class="checkout-item" for="payment_1">Cash On Delivery</label>
<input type="radio" name="payment" class="radio" id="payment_1" value="3" iscod="1" onclick="selectPayment(this)">
<label class="checkout-item" for="payment_2">Credit Card / Debit Card</label>
<input type="radio" name="payment" class="radio" id="payment_2" value="9" checked="" iscod="0" onclick="selectPayment(this)">
<label class="checkout-item" for="ECS_NEEDINSURE_1">Home Delivery</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_1" value="3" checked="true" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">
<label class="checkout-item" for="ECS_NEEDINSURE_2">Self-pickup</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_2" value="8" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">
Javascript
function checkOrderForm(frm) {
var paymentSelected = false;
var shippingSelected = false;
// Check whether the payment method is selected
for (i = 0; i < frm.elements.length; i++) {
if (frm.elements[i].name == 'shipping' && frm.elements[i].checked) {
shippingSelected = true;
}
if (frm.elements[i].name == 'payment' && frm.elements[i].checked) {
paymentSelected = true;
}
}
if (!shippingSelected) {
alert(flow_no_shipping);
return false;
}
if (!paymentSelected) {
alert(flow_no_payment);
return false;
}
If I'm understanding your question correctly, you would only like this test to pass if BOTH of the radio buttons are checked. Currently, as long as one radio button in each group is checked, the code variable will be set to true, ignoring the state of the other radio button.
For example, if ONLY one of your shipping radio buttons was checked, the shippingSelected variable would be set to true and it would remain true.
A way to fix this is to begin with shippingSelected and paymentSelected set to true, and if one of the radio buttons are found to be unchecked, the variable will be set to false.
Here's an example:
var paymentSelected = true;
var shippingSelected = true;
// Check whether the payment method is selected
for (i = 0; i < frm.elements.length; i++) {
if (frm.elements[i].name == 'shipping' && !frm.elements[i].checked) {
shippingSelected = false;
}
if (frm.elements[i].name == 'payment' && !frm.elements[i].checked) {
paymentSelected = false;
}
}
You can use $("#payment_1").checked to check whether the radio is checked or not. Similarly you could use other ID's to check whether they are selected or not.
Here is the fiddle:
https://jsfiddle.net/bf8bo43t/
Try below code,
HTML
<form method="post" name="frm_payment_types">
<label class="checkout-item" for="payment_1">Cash On Delivery</label>
<input type="radio" name="payment" class="radio" id="payment_1" value="3" iscod="1" onclick="selectPayment(this)">
<label class="checkout-item" for="payment_2">Credit Card / Debit Card</label>
<input type="radio" name="payment" class="radio" id="payment_2" value="9" iscod="0" onclick="selectPayment(this)">
<label class="checkout-item" for="ECS_NEEDINSURE_1">Home Delivery</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_1" value="3" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">
<label class="checkout-item" for="ECS_NEEDINSURE_2">Self-pickup</label>
<input name="shipping" type="radio" id="ECS_NEEDINSURE_2" value="8" supportcod="1" insure="0" class="radio" onclick="selectShipping(this)">
<br />
<input type="submit" name="submit" onclick="return checkOrderForm();" />
</form>
Javascript
<script type="text/javascript">
function validateForm(){
var payment_1 = document.getElementById('payment_1');
var payment_2 = document.getElementById('payment_2');
var ECS_NEEDINSURE_1 = document.getElementById('ECS_NEEDINSURE_1');
var ECS_NEEDINSURE_2 = document.getElementById('ECS_NEEDINSURE_2');
if((payment_1.checked == true || payment_2.checked == true) && (ECS_NEEDINSURE_1.checked == true || ECS_NEEDINSURE_2.checked == true)){
return true;
}
else if(payment_1.checked == false && payment_2.checked == false){
alert("Please select Cash On Delivery or Credit Card / Debit Card.");
}
else if(ECS_NEEDINSURE_1.checked == false && ECS_NEEDINSURE_2.checked == false){
alert("Please select Home Delivery or Self-pickup.");
}
return false;
}
</script>
I have a series of randomly generated textbox and radio-button inputs. It's kinda like a Quiz, so what I would like to do is collect all of the inputs and send them to the server so it can evaluate them.
Now, to make it easier, I put all of the radio-button inputs to the end.
I use the following code to collect the inputs of the textbox-types:
$('#button_submit').click(function() {
var answer_list = '';
$('input:text').each(function(index,data) {
answer_list = answer_list + '$' + $(data).val();
}
...
}
This works perfectly, but after this, I don't know what to do. I could loop through the input:radio:checked elements and add the value of those to my string, which would work perfectly, except if the user decides to submit their answers while leaving one of the radio-button inputs empty. In that case, nothing gets added to the string and the server will be missing the answer to that question and it messes everything up.
So I need to add something to my string when the code realizes that there is a radio-button question, but no answer was chosen, but I have no idea how to do it.
Edit:
HTML example:
<div class="form-group" id="form-group-34">
<label class="control-label " for="question">What is 92848 × 71549?</label>
<input autofocus="true" class="form-control" id="input34" name="answer" size="20" type="text" value="">
</div>
<div class="form-group" id="form-group-35">
<label class="control-label " for="question">Is 194 divisible by 3?</label>
<br><input id="14-answer-0" name="14-answer" type="radio" value="1">
<label for="14-answer-0">Yes</label>
<br><input id="14-answer-1" name="14-answer" type="radio" value="0">
<label for="14-answer-1">No</label>
</div>
<div class="form-group" id="form-group-36">
<label class="control-label " for="question">Determine the day of the week for 1954 Jun 26!</label>
<br><input id="35-answer-0" name="35-answer" type="radio" value="1">
<label for="35-answer-0">Monday</label>
<br><input id="35-answer-1" name="35-answer" type="radio" value="2">
<label for="35-answer-1">Tuesday</label>
<br><input id="35-answer-2" name="35-answer" type="radio" value="3">
<label for="35-answer-2">Wednesday</label>
<br><input id="35-answer-3" name="35-answer" type="radio" value="4">
<label for="35-answer-3">Thursday</label>
<br><input id="35-answer-4" name="35-answer" type="radio" value="5">
<label for="35-answer-4">Friday</label>
<br><input id="35-answer-5" name="35-answer" type="radio" value="6">
<label for="35-answer-5">Saturday</label>
<br><input id="35-answer-6" name="35-answer" type="radio" value="0">
<label for="35-answer-6">Sunday</label>
</div>
But the problem is, that these questions are randomly generated. So there can be 5 simple textbox-type inputs, then 5 radio-button type ones, or there might be only 1 radio-button type question, and all of their attributes are generated dynamically, so I can't really put the radio-button group's name in the code, because I don't know it.
You could use this to see if they are all checked:
var allRadios = $('input[name="namevalue"][type=radio]').length;
var allCheckedRadios $('input[name="namevalue"][type=radio]').filter(function() {
return this.checked;
}).length;
if( allRadios == allCheckedRadios){
// do what you need
}
whatever your name is change "namevalue" to that. The same basic logic to get the values can be applied.
Note: performance gain for modern browsers on these selector forms above over $('input:radio') can be had.
EDIT From updated question:
Here I applied the techniques above to walk through each of the form groups looking for radio buttons, and if they exist throw an alert if none are checked within that group. You could also create and return a Boolean value if ANY of the groups have radio selections with none selected. "hasUncheckedRadios" will be either 0 if none are checked or 1 if one is checked - since radio buttons within a group only select one. You could use this logic in your validation to ensure that all of the groups have a valid checked radio button (IF they contain a radio that is);
function checkRadios() {
var allGroups = $('.form-group');
allGroups.each(function() {
var allRadios = $(this).find('input[type=radio]').length;
var hasUncheckedRadios = $(this).find('input[type=radio]').filter(function() {
return this.checked;
}).length;
console.log('total:' + allRadios + ' checked:' + hasUncheckedRadios);
// if allRadios is > 0 then radios exist and hasUncheckedRadios == 0 none are checked
if (allRadios && !hasUncheckedRadios) {
alert("Form Group" + $(this).attr('id') + " has radio buttons unaswered");
}
});
}
$('#checkem').on('click', function() {
console.log('checking...');
checkRadios();
});
fiddle with it here: https://jsfiddle.net/MarkSchultheiss/nv7cjpr2/
I would iterate a bit more: https://jsfiddle.net/Twisty/ghc7u2ab/
HTML
<div class="form-group" id="form-group-34">
<label class="control-label " for="question">What is 92848 × 71549?</label>
<input autofocus="true" class="form-control" id="input34" name="answer" size="20" type="text" value="">
</div>
<div class="form-group" id="form-group-35">
<label class="control-label " for="question">Is 194 divisible by 3?</label>
<br>
<input id="14-answer-0" name="14-answer" type="radio" value="1">
<label for="14-answer-0">Yes</label>
<br>
<input id="14-answer-1" name="14-answer" type="radio" value="0">
<label for="14-answer-1">No</label>
</div>
<div class="form-group" id="form-group-36">
<label class="control-label " for="question">Determine the day of the week for 1954 Jun 26!</label>
<br>
<input id="35-answer-0" name="35-answer" type="radio" value="1">
<label for="35-answer-0">Monday</label>
<br>
<input id="35-answer-1" name="35-answer" type="radio" value="2">
<label for="35-answer-1">Tuesday</label>
<br>
<input id="35-answer-2" name="35-answer" type="radio" value="3">
<label for="35-answer-2">Wednesday</label>
<br>
<input id="35-answer-3" name="35-answer" type="radio" value="4">
<label for="35-answer-3">Thursday</label>
<br>
<input id="35-answer-4" name="35-answer" type="radio" value="5">
<label for="35-answer-4">Friday</label>
<br>
<input id="35-answer-5" name="35-answer" type="radio" value="6">
<label for="35-answer-5">Saturday</label>
<br>
<input id="35-answer-6" name="35-answer" type="radio" value="0">
<label for="35-answer-6">Sunday</label>
</div>
<button id="button_submit">Submit</button>
JQuery
$("#button_submit").click(function() {
var answer_list = {};
$(".form-group").each(function(i, v) {
console.log("Index:", i, "ID: [", $(v).attr("id"), "]");
answer_list[$(v).attr("id")] = {};
var ind = $(v).find("input");
$.each(ind, function(i2, el) {
console.log("Type of Element:", $(el).attr("type"));
switch ($(el).attr("type")) {
case "text":
answer_list[$(v).attr("id")][$(el).attr("id")] = ($(el).val() != "") ? $(el).val() : null;
break;
case "radio":
var isAnswered = false;
$(el).each(function(i3, rad) {
if ($(rad).is(":checked")) {
answer_list[$(v).attr("id")][$(rad).attr("name")] = $(rad).val();
isAnswered = true;
}
if (!isAnswered) {
answer_list[$(v).attr("id")][$(el).eq(0).attr("name")] = null;
}
});
break;
}
});
});
console.log(answer_list);
return false;
});
Possible Result
answer_list: {
form-group-34: {
input34: null
},
form-group-35: {
14-answer: 0
},
form-group-36: {
35-answer: null
}
}
This will iterate each group and look for an answer. If one is found, the value is added. If not, null is added as the result.
loop class group that has radio then use .prop("checked")
var frmGroup= 0, checked= 0;
$('.form-group').each(function(index) {
if ($(this).children('input:radio').length > 0) {
frmGroup++;
$(this).children('input:radio').each(function(index) {
if ($(this).prop("checked") == true) {
checked++;
}
});
}
});
if(frmGroup != checked)...
working example: https://jsfiddle.net/nsL3drz5/
I am hoping to get all the checked checkboxes from my form into an array.
Here is what I did.
$("div.category-panel input:checked").next ('label').text(); perfectly gets all the checked checkboxes but it just shows them together as one text. As an example, checkbox1, checkbox2 and checkbox3 (if checked) would show as checkbox1checkbox2checkbox3.
I was hoping to get these different checkboxes in an array so that I can use them.
$('.submit').on("click", function(e) {
//got all checked checkboxes into 'children'.
children = $("div.category-panel input:checked").next ('label').text();
//Put in array.
var array = [];
var i = 0;
$.each(children, function(key, value){
array.push($(this).text());
});
//Show the array.
for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}
});
HTML, just in case is:-
<div class="category-panel">
<input type="checkbox" name="name_service2" id="tid-46" value="46" checked="checked"> <label class="option" for="edit-tid-46">CheckBox1</label>
<input type="checkbox" name="name_service3" id="tid-47" value="47" checked="checked"> <label class="option" for="edit-tid-47">CheckBox2</label>
<input type="checkbox" name="name_service4" id="tid-44" value="44" checked="checked"> <label class="option" for="edit-tid-44">CheckBox3</label>
<input type="checkbox" name="name_service5" id="tid-48" value="48" checked="checked"> <label class="option" for="edit-tid-48">CheckBox4</label>
</div>
You can use .map() like
$('.submit').on("click", function (e) {
//got all checked checkboxes into 'children'.
var array = $("div.category-panel input:checked").next('label').map(function(){
return $(this).text();
}).get();
//Show the array.
for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}
});
$('.submit').on("click", function(e) {
//got all checked checkboxes into 'children'.
var array = $("div.category-panel input:checked").next('label').map(function() {
return $(this).text();
}).get();
//Show the array.
for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="category-panel">
<input type="checkbox" name="name_service2" id="tid-46" value="46" checked="checked" />
<label class="option" for="edit-tid-46">CheckBox1</label>
<input type="checkbox" name="name_service3" id="tid-47" value="47" checked="checked" />
<label class="option" for="edit-tid-47">CheckBox2</label>
<input type="checkbox" name="name_service4" id="tid-44" value="44" checked="checked" />
<label class="option" for="edit-tid-44">CheckBox3</label>
<input type="checkbox" name="name_service5" id="tid-48" value="48" checked="checked" />
<label class="option" for="edit-tid-48">CheckBox4</label>
</div>
<button class="submit">submit</button>
In your case children is a string, which contains the concatenated text of all label's which are next siblings of checked checkboxes
you need to use .map() function to get the all labels text as object. then use .get() to get them in array:
$("div.category-panel input:checked").next('label').map(function(){
return $(this).text();
}).get();// ["checkbox1","checkbox2" ,"checkbox3"]
If you want them as comma separated values, use .join() after .get()
$("div.category-panel input:checked").next('label').map(function(){
return $(this).text();
}).get().join();// "checkbox1, checkbox2 ,checkbox3"
<input type="checkbox" name="name_service2" id="tid-46" value="46" checked="checked" /> <label class="option" for="edit-tid-46">A Value</label>
<input type="checkbox" name="name_service3" id="tid-47" value="47" checked="checked" /> <label class="option" for="edit-tid-47">A Value</label>
<input type="checkbox" name="name_service4" id="tid-44" value="44" checked="checked" /> <label class="option" for="edit-tid-44">A Value</label>
<input type="checkbox" name="name_service5" id="tid-48" value="48" checked="checked" /> <label class="option" for="edit-tid-48">A Value</label>
$('.submit').on("click", function(e) {
//got all checked checkboxes into 'children'.
children = $("div.category-panel input:checked").next ('label');
//Put in array.
var array = [];
$.each(children, function(){
array.push($(this).text());
});
//Show the array.
$(array).each(function(){
console.log(this.toString());
});
});
http://jsfiddle.net/7ryhv07e/1/