Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am trying to get the value of the check box to display on we page
<div class="form-check form-check-inline">
<input class="form-check-input skill" type="checkbox" id="inlineCheckbox1" value="JAVA">
<label class="form-check-label" for="inlineCheckbox1">JAVA</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input skill" type="checkbox" id="inlineCheckbox2" value="HTML">
<label class="form-check-label" for="inlineCheckbox2">HTML</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input skill" type="checkbox" id="inlineCheckbox3" value="CSS" >
<label class="form-check-label" for="inlineCheckbox3">CSS</label>
</div>
<html>
<body>
<div class="form-check form-check-inline">
<input class="form-check-input skill" type="checkbox" id="inlineCheckbox1" name="checkbox" value="JAVA">
<label class="form-check-label" for="inlineCheckbox1">JAVA</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input skill" type="checkbox" id="inlineCheckbox2" name="checkbox" value="HTML">
<label class="form-check-label" for="inlineCheckbox2">HTML</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input skill" type="checkbox" id="inlineCheckbox3" name="checkbox" value="CSS" >
<label class="form-check-label" for="inlineCheckbox3">CSS</label>
</div>
<button id="btn">Submit</button> <br>
<script>
document.getElementById('btn').onclick = function() {
var checkbox;
for (checkbox of document.getElementsByName('checkbox')) {
if (checkbox.checked)
document.body.append(checkbox.value + ' ');
}
}
</script>
</body>
</html>
Related
I have created one HTML/JS application in which i have created 5 questions with radio button answer.i have given user to do click NA for not applicable questions.but i want to put condition that user only able to grey out 3 questions.Not more than that here i am confused how to do it.below is the code.Also i have put Next button with condition so each question which is not grey out should be answer :-
HTML :-
<div class="section-1-questions">
<div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br>
<fieldset class="form-group">
<div class="row1">
<div class = "question1">
<legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1" >
<label class="form-check-label" for="gridRadios1">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios2" value="2">
<label class="form-check-label" for="gridRadios2">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3">
<label class="form-check-label" for="gridRadios3">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios4" value="4">
<label class="form-check-label" for="gridRadios4">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios5" value="5">
<label class="form-check-label" for="gridRadios5">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q1Remark" value="Remark" onclick="onButtonClick(1)" />
<input class="hide" type="text" id="textInput1" value="" oninput="updateTextBox()" />
<p>Remaining Characters: <span id="chars-left">100</span></p>
</div>
<div class="form-group">
<input type="button" name="disable1" id = "na1" value="N/A"/>
</div>
</div></div>
</div>
{{!-- <input type="button" id="remarks" value="Remarks" /> --}}
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="1">
<label class="form-check-label" for="gridRadios6">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios7" value="2">
<label class="form-check-label" for="gridRadios7">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios8" value="3">
<label class="form-check-label" for="gridRadios8">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios9" value="4">
<label class="form-check-label" for="gridRadios9">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios10" value="5">
<label class="form-check-label" for="gridRadios10">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q2Remark" value="Remark" onclick="onButtonClick(2)" />
<input class="hide" type="text" id="textInput2" value="" />
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios11" value="1">
<label class="form-check-label" for="gridRadios11">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input " type="radio" name="question3" id="gridRadios12" value="2">
<label class="form-check-label" for="gridRadios12">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios13" value="3">
<label class="form-check-label" for="gridRadios13">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios14" value="4">
<label class="form-check-label" for="gridRadios14">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios15" value="5">
<label class="form-check-label" for="gridRadios15">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q3Remark" value="Remark" onclick="onButtonClick(3)" />
<input class="hide" type="text" id="textInput3" value="" />
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios16" value="1">
<label class="form-check-label" for="gridRadios16">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios17" value="2">
<label class="form-check-label" for="gridRadios17">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios18" value="3">
<label class="form-check-label" for="gridRadios18">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios19" value="4">
<label class="form-check-label" for="gridRadios19">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios20" value="5">
<label class="form-check-label" for="gridRadios20">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q4Remark" value="Remark" onclick="onButtonClick(4)" />
<input class="hide" type="text" id="textInput4" value="" />
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q5" class="col-form-label col-sm-8 pt-3"><b>5) QUESTION 5</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios21" value="1">
<label class="form-check-label" for="gridRadios21">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios22" value="2">
<label class="form-check-label" for="gridRadios22">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios23" value="3">
<label class="form-check-label" for="gridRadios23">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios24" value="4">
<label class="form-check-label" for="gridRadios24">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios25" value="5">
<label class="form-check-label" for="gridRadios25">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q5Remark" value="Remark" onclick="onButtonClick(5)" />
<input class="hide" type="text" id="textInput5" value="" />
</div>
</div>
</div>
</fieldset>
<div class="form-group">
<label for="remarks"><b>Remarks / Observations </b></label>
<input type="name" class="form-control" name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations">
<small id="nameHelp" class="form-text text-muted">Please enter your Remarks / Observations about these questions.</small>
</div>
</div>
<br>
<a class="btn btn-primary btnPrevious" >Previous</a>
<a class="btn btn-primary btnNextS1" >Next</a>
</div>
JS :-
$(document).ready(function () {
$("#na1").click(function() {
console.log("na is working");
$(".question1 input").attr('disabled', true);
})
});
$('.btnNextS1').click(function(){
if($('div.row1:not(:has(:radio:checked))').length){
$('div.row1:not(:has(:radio:checked))').parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>");
}else {
// e.stopPropagation();
$('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click');
}});
As each question has identical information, why not do it once and repeat.
For the NA button, we just add a class onto the enclosing div which helps us with styling and also gives us a selector to test for legnth. When it's over 3 we prevent it from continuing.
Sorry I changed the code, but hopefully this will give you some insight on how to make your code more lean, managable and responsive. Now if you want to update the answers, you can do it once and it works for them all.
$(document).ready(function() {
let ctr = 1;
$('.answers').each(function(index) {
let i = index + 1
let html = ` <div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="1">
<label class="form-check-label" for="gridRadios${ctr}"> Never</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="2">
<label class="form-check-label" for="gridRadios${ctr}">Rarely</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="3">
<label class="form-check-label" for="gridRadios${ctr}">Occasionally</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="4">
<label class="form-check-label" for="gridRadios${ctr}">Often</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="5">
<label class="form-check-label" for="gridRadios${ctr}">Always</label>
</div>
<div class="form-group">
<input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" />
<input class="hide" type="text" id="textInput${i}" value="" oninput="updateTextBox()" />
<p>Remaining Characters: <span id="chars-left">100</span></p>
</div>
<div class="form-group">
<button name="disable${i}" id="na${i}" class='btn-na'>N/A</button>
</div>
`
$(this).html(html);
ctr++;
})
$(".btn-na").click(function() {
let n = $('.answers.disabled').length
if (n >= 3) {
alert('You can only disable 3');
return
}
$(this).closest('.answers').find("input").attr('disabled', true);
$(this).closest('.answers').addClass('disabled')
})
});
$('.btnNextS1').click(function() {
if ($('div.row1:not(:has(:radio:checked))').length) {
$('div.row1:not(:has(:radio:checked))').parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>");
} else {
// e.stopPropagation();
$('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click');
}
});
.answers.disabled {
opacity: .5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-1-questions">
<div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br>
<fieldset class="form-group">
<div class="row1">
<div class="question1">
<legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q5" class="col-form-label col-sm-8 pt-3"><b>5) QUESTION 5</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<div class="form-group">
<label for="remarks"><b>Remarks / Observations </b></label>
<input type="name" class="form-control" name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations">
<small id="nameHelp" class="form-text text-muted">Please enter your Remarks / Observations about these questions.</small>
</div>
</div>
<br>
<a class="btn btn-primary btnPrevious">Previous</a>
<a class="btn btn-primary btnNextS1">Next</a>
</div>
You want to use the disabled html attribute along with the jquery prop function.
$(".class").prop( "disabled", true );
It's important to note that using disabled and required on the same element can cause problems for users. This is because they won't be able to submit the form because a input is disabled, preventing input, but it's also required.
EDIT
You'll want to define a "counter" variable var disableCount = 0; which will increment every time a question is disabled. Once the counter variable is incremented three times. The click function should 1 Stop incrementing the counter and 2 stop disabling questions.
Something like this should work:
var disableCount = 0;
$("#na1").click(function() {
if(disableCount >= 3) return;
console.log("na is working");
$(".question1 input").attr('disabled', true);
disableCount++;
});
In a Laravel Project, the Create Blade View contains some checkboxes. I have easily achieved the feature that, If the first checkbox is selected, the other checkbox will be disabled.
Create Blade View
<div class="form-group">
<label for="unit_price">Size</label>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="size[]" value="0" >
<label class="form-check-label" for="inlineCheckbox1">0</label>
</div>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" name="size[]" value="10" >
<label class="form-check-label" for="inlineCheckbox2">10</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" name="size[]" value="20">
<label class="form-check-label" for="inlineCheckbox3">20</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" name="size[]" value="30">
<label class="form-check-label" for="inlineCheckbox4">30</label>
</div>
</div>
jquery
$("#inlineCheckbox1").click(function() {
$(":checkbox").not(this).prop("disabled", this.checked);
});
But the problem occurs in the Edit Blade View.
Edit Blade View
<div class="form-group">
<label for="unit_price">Size</label>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="size[]" value="0"
{{in_array("0",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox1">0</label>
</div>
<div class=" form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" name="size[]" value="10"
{{in_array("10",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox2">10</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" name="size[]" value="20"
{{in_array("20",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox3">20</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" name="size[]" value="30"
{{in_array("30",$size)?"checked":""}}>
<label class="form-check-label" for="inlineCheckbox4">30</label>
</div>
</div>
In the edit view, the other checkboxes are not disabled though #inlineCheckbox1 was pre-selected. So, the other checkboxes seem clickable.
I want to achieve: the other checkboxes will always be disabled if #inlineCheckbox1 is checked.
try following js in your edit view
$(function(){
if($('#inlineCheckbox1').is(":checked"))
$(":checkbox").not($('#inlineCheckbox1')).prop("disabled", true);
})
This question already has answers here:
Show/hide 'div' using JavaScript
(15 answers)
Closed 3 years ago.
I have a form where the user choose if he/she is SINGLE CITIZENSHIP OR DUAL CITIZENSHIP.
If the user chooses SINGLE CITIZENSHIP the hidden div will not show up and if the user chooses DUAL CITIZENSHIP the hidden div will show below.
<div class="form-row">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">Filipino</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">Dual Citizenship</label>
</div>
</div>
<div id="hidden">
<div class="form-row">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">By birth</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">By Naturalize</label>
</div>
</div>
</div>
let valeInpOne = document.getElementById('inlineCheckbox1');
let valeInpTwo = document.getElementById('inlineCheckbox2').value;
let ele = document.getElementById("hidden");
if(valeInpOne == 'option1'){ ele.hidden = true }else if(valeInpTwo == 'option2'){ ele.hidden = false }
Use change() event of jQuery and show-hide div.
$(document).ready(function () {
$('#inlineCheckbox2').change(function () {
if (!this.checked)
$('#hidden').fadeOut('slow');
else
$('#hidden').fadeIn('slow');
});
});
#hidden{
display:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox1"
value="option1"
/>
<label class="form-check-label" for="inlineCheckbox1">Filipino</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox2"
value="option2"
/>
<label class="form-check-label" for="inlineCheckbox2"
>Dual Citizenship</label
>
</div>
</div>
<div id="hidden">
<div class="form-row">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox1"
value="option1"
/>
<label class="form-check-label" for="inlineCheckbox1">By birth</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="inlineCheckbox2"
value="option2"
/>
<label class="form-check-label" for="inlineCheckbox2"
>By Naturalize</label
>
</div>
</div>
</div>
Refer: https://stackoverflow.com/a/19447642/10971575
The task is to write to a string whether a checkbox has been checked out of a series of 27 checkboxes with the same class name of "GEMS_0".
When I access elements through console it works.
document.getElementById(document.getElementsByClassName("GEMS_0")[0].id).value
returns "moved"
document.getElementById(document.getElementsByClassName("GEMS_0")[0].id).value
returns false.
When I do it programmatically, by calling getGEMSValue(0), it works for the first element and then returns null for the value of the second element when it should be "filled with wonder". I tried changing to "filled-with-wonder" but that didn't change anything.
Here is the code for accessing the elements programmatically:
function getGEMSValue(num) {
let return_string = "";
let checkboxes = document.getElementsByClassName("GEMS_" + num.toString());
console.log(checkboxes);
for (var i = 0; i < checkboxes.length; i++) {
console.log(checkboxes[i].id);
console.log(document.getElementById(checkboxes[i].id));
let value = document.getElementById(checkboxes[i].id).value
if (document.getElementById(checkboxes[i].id).checked) {
return_string += value + ";";
} else {
return_string += "false;";
}
}
//remove semicolon at end
return_string = return_string.slice(0,-1);
return return_string;
}
This is the HTML being accessed.
<p align="center">How would you describe this video's overall emotion? You may select multiple options.</p>
<!-- 9 emotions per row, 5 rows -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox1" value="moved">
<label class="form-check-label" for="inlineCheckbox1">moved</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox2" value="filled with wonder">
<label class="form-check-label GEMS_0" for="inlineCheckbox2">filled with wonder</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox3" value="allured">
<label class="form-check-label GEMS_0" for="inlineCheckbox3">allured</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox4" value="fascinated">
<label class="form-check-label" for="inlineCheckbox4">fascinated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox5" value="overwhelmed">
<label class="form-check-label" for="inlineCheckbox5">overwhelmed</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox6" value="feeling of transcendence">
<label class="form-check-label" for="inlineCheckbox6">feeling of transcendence</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox7" value="serene">
<label class="form-check-label" for="inlineCheckbox7">serene</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox8" value="calm">
<label class="form-check-label" for="inlineCheckbox8">calm</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox9" value="soothed">
<label class="form-check-label" for="inlineCheckbox9">soothed</label>
</div>
<br />
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox10" value="tender">
<label class="form-check-label" for="inlineCheckbox10">tender</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox11" value="affectionate">
<label class="form-check-label" for="inlineCheckbox11">affectionate</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox12" value="mellow">
<label class="form-check-label" for="inlineCheckbox12">mellow</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox13" value="nostalgic">
<label class="form-check-label" for="inlineCheckbox13">nostalgic</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox14" value="sentimental">
<label class="form-check-label" for="inlineCheckbox14">sentimental</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox15" value="dreamy">
<label class="form-check-label" for="inlineCheckbox15">dreamy</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox16" value="strong">
<label class="form-check-label" for="inlineCheckbox16">strong</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox17" value="energetic">
<label class="form-check-label" for="inlineCheckbox17">energetic</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox18" value="triumphant">
<label class="form-check-label" for="inlineCheckbox18">triumphant</label>
</div>
<br />
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox19" value="animated">
<label class="form-check-label" for="inlineCheckbox19">animated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox20" value="bouncy">
<label class="form-check-label" for="inlineCheckbox20">bouncy</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox21" value="joyful">
<label class="form-check-label" for="inlineCheckbox21">joyful</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox22" value="sad">
<label class="form-check-label" for="inlineCheckbox22">sad</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox23" value="tearful">
<label class="form-check-label" for="inlineCheckbox23">tearful</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox24" value="blue">
<label class="form-check-label" for="inlineCheckbox24">blue</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox25" value="tense">
<label class="form-check-label" for="inlineCheckbox25">tense</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox26" value="agitated">
<label class="form-check-label" for="inlineCheckbox26">agitated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox27" value="nervous">
<label class="form-check-label" for="inlineCheckbox27">nervous</label>
</div>
<br />
</div>
As said in comments, document.getElementById( element.id ) is an anti-pattern and should really just be element since id should be unique in document.
But for your task, intead of iterating over all the checkboxes, then checking all their checked status to compose your string, you can get the same result much faster using a simple :checked selector:
document.getElementById('checker').onclick = (evt) => {
// select only the checked inputs with class GEMS_0
const checked_gems = document.querySelectorAll('.GEMS_0:checked');
// compose your string of values
const result = [...checked_gems].map( elem => elem.value ).join(';');
console.log( result );
}
body { margin-bottom: 150px; }
<p align="center">How would you describe this video's overall emotion? You may select multiple options.</p>
<!-- 9 emotions per row, 5 rows -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox1" value="moved">
<label class="form-check-label" for="inlineCheckbox1">moved</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox2" value="filled with wonder">
<label class="form-check-label GEMS_0" for="inlineCheckbox2">filled with wonder</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox3" value="allured">
<label class="form-check-label GEMS_0" for="inlineCheckbox3">allured</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox4" value="fascinated">
<label class="form-check-label" for="inlineCheckbox4">fascinated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox5" value="overwhelmed">
<label class="form-check-label" for="inlineCheckbox5">overwhelmed</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox6" value="feeling of transcendence">
<label class="form-check-label" for="inlineCheckbox6">feeling of transcendence</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox7" value="serene">
<label class="form-check-label" for="inlineCheckbox7">serene</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox8" value="calm">
<label class="form-check-label" for="inlineCheckbox8">calm</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox9" value="soothed">
<label class="form-check-label" for="inlineCheckbox9">soothed</label>
</div>
<br />
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox10" value="tender">
<label class="form-check-label" for="inlineCheckbox10">tender</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox11" value="affectionate">
<label class="form-check-label" for="inlineCheckbox11">affectionate</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox12" value="mellow">
<label class="form-check-label" for="inlineCheckbox12">mellow</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox13" value="nostalgic">
<label class="form-check-label" for="inlineCheckbox13">nostalgic</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox14" value="sentimental">
<label class="form-check-label" for="inlineCheckbox14">sentimental</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox15" value="dreamy">
<label class="form-check-label" for="inlineCheckbox15">dreamy</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox16" value="strong">
<label class="form-check-label" for="inlineCheckbox16">strong</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox17" value="energetic">
<label class="form-check-label" for="inlineCheckbox17">energetic</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox18" value="triumphant">
<label class="form-check-label" for="inlineCheckbox18">triumphant</label>
</div>
<br />
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox19" value="animated">
<label class="form-check-label" for="inlineCheckbox19">animated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox20" value="bouncy">
<label class="form-check-label" for="inlineCheckbox20">bouncy</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox21" value="joyful">
<label class="form-check-label" for="inlineCheckbox21">joyful</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox22" value="sad">
<label class="form-check-label" for="inlineCheckbox22">sad</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox23" value="tearful">
<label class="form-check-label" for="inlineCheckbox23">tearful</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox24" value="blue">
<label class="form-check-label" for="inlineCheckbox24">blue</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox25" value="tense">
<label class="form-check-label" for="inlineCheckbox25">tense</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox26" value="agitated">
<label class="form-check-label" for="inlineCheckbox26">agitated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox27" value="nervous">
<label class="form-check-label" for="inlineCheckbox27">nervous</label>
</div>
<br />
</div>
<button id="checker">check selection</button>
simply use this code
function getGEMSValue(num) {
let inElm = document.getElementById('inlineCheckbox'+num);
//...
console.log( inElm.id, inElm.checked, inElm.value );
};
As the question mentioned document.getElementsByClassName.
Just slight changing to JS of answer by #Kaiido
const checkedVals = () => {
let result = [];
Array.from(document.getElementsByClassName("GEMS_0")).forEach(elem => elem.checked ? result.push(elem.value) : '');
console.log(result, result.join(';'));
// OR
let result1 = Array.from(document.getElementsByClassName("GEMS_0")).map(elem => elem.checked ? elem.value : null).filter(x => !!x);
console.log(result1, result1.join(';'));
};
document.getElementById('checker').onclick = checkedVals;
body {
margin-bottom: 150px;
}
<p align="center">How would you describe this video's overall emotion? You may select multiple options.</p>
<!-- 9 emotions per row, 5 rows -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox1" value="moved">
<label class="form-check-label" for="inlineCheckbox1">moved</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox2" value="filled with wonder">
<label class="form-check-label GEMS_0" for="inlineCheckbox2">filled with wonder</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox3" value="allured">
<label class="form-check-label GEMS_0" for="inlineCheckbox3">allured</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox4" value="fascinated">
<label class="form-check-label" for="inlineCheckbox4">fascinated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox5" value="overwhelmed">
<label class="form-check-label" for="inlineCheckbox5">overwhelmed</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox6" value="feeling of transcendence">
<label class="form-check-label" for="inlineCheckbox6">feeling of transcendence</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox7" value="serene">
<label class="form-check-label" for="inlineCheckbox7">serene</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox8" value="calm">
<label class="form-check-label" for="inlineCheckbox8">calm</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox9" value="soothed">
<label class="form-check-label" for="inlineCheckbox9">soothed</label>
</div>
<br />
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox10" value="tender">
<label class="form-check-label" for="inlineCheckbox10">tender</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox11" value="affectionate">
<label class="form-check-label" for="inlineCheckbox11">affectionate</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox12" value="mellow">
<label class="form-check-label" for="inlineCheckbox12">mellow</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox13" value="nostalgic">
<label class="form-check-label" for="inlineCheckbox13">nostalgic</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox14" value="sentimental">
<label class="form-check-label" for="inlineCheckbox14">sentimental</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox15" value="dreamy">
<label class="form-check-label" for="inlineCheckbox15">dreamy</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox16" value="strong">
<label class="form-check-label" for="inlineCheckbox16">strong</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox17" value="energetic">
<label class="form-check-label" for="inlineCheckbox17">energetic</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox18" value="triumphant">
<label class="form-check-label" for="inlineCheckbox18">triumphant</label>
</div>
<br />
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox19" value="animated">
<label class="form-check-label" for="inlineCheckbox19">animated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox20" value="bouncy">
<label class="form-check-label" for="inlineCheckbox20">bouncy</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox21" value="joyful">
<label class="form-check-label" for="inlineCheckbox21">joyful</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox22" value="sad">
<label class="form-check-label" for="inlineCheckbox22">sad</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox23" value="tearful">
<label class="form-check-label" for="inlineCheckbox23">tearful</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox24" value="blue">
<label class="form-check-label" for="inlineCheckbox24">blue</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox25" value="tense">
<label class="form-check-label" for="inlineCheckbox25">tense</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox26" value="agitated">
<label class="form-check-label" for="inlineCheckbox26">agitated</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox27" value="nervous">
<label class="form-check-label" for="inlineCheckbox27">nervous</label>
</div>
<br />
</div>
<button id="checker">check selection</button>
I have a modal that I am using for a coding boot camp assignment -
I have 7 days of the week listed as well as weekend/weekday options.
I thought I could use the Jquery .each and CSS :checked to pull the values that I had assigned to each of these inputs but I seem to be doing something wrong as every time I try to console log the array I am pushing to - it returns an empty array.
This is my first post on StackOverflow and I am extremely new to coding, please be gentle :)
Apologies in advance for syntax and formatting. Like I said I am super new and have only been coding for about 1.5 months.
I tried giving all the checkboxes different ID's and pulling the values one by one into an array, I also tried giving them all the same name so I could use the CSS checked feature to pull them all at once using .each and this. Neither seemed to work
//below is the check box portion of the modal//
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Monday">
<label for="Monday">Monday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Tuesday">
<label for="Tuesday">Tuesday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Wednesday">
<label for="Wednesday">Wednesday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Thursday">
<label for="Thursday">Thursday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Friday">
<label for="Friday">Friday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Saturday">
<label for="Saturday">Saturday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Sunday">
<label for="Sunday">Sunday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekday">
<label for="Weekday">Weekday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekend">
<label for="Weekend">Weekend</label>
</div>
// here is where I try to call the values of which boxes are checked back//
$("#submitButton").on("click", function () {
event.preventDefault();
var daysOfWeek1 = [];
$.each($("input[name='dayOfWeek']:checked"), function(){
daysOfWeek1.push($(this).val());
});
console.log(daysOfWeek1)
});
I would like to get an array back containing the values (set of strings) that I entered for each check box options and be able to store it in a variable and console.log it as well.
Right now I am only getting an empty array
It's even simpler - just use map, then convert it to an array (to remove excess properties) using spread syntax:
$("#submitButton").on("click", function() {
event.preventDefault();
var daysOfWeek1 = [...$("input[name='daysOfWeek']:checked").map((i, el) => $(el).val())];
console.log(daysOfWeek1)
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Monday">
<label for="Monday">Monday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Tuesday">
<label for="Tuesday">Tuesday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Wednesday">
<label for="Wednesday">Wednesday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Thursday">
<label for="Thursday">Thursday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Friday">
<label for="Friday">Friday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Saturday">
<label for="Saturday">Saturday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Sunday">
<label for="Sunday">Sunday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekday">
<label for="Weekday">Weekday</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="daysOfWeek" value="Weekend">
<label for="Weekend">Weekend</label>
<button id="submitButton">Submit</button>
</div>
ooops. It totally works - I just used dayOfWeek below and daysOfWeek above...
.>
Sorry to bother you