I would like to stop a function so it can run multiple times on one page. It is some radio buttons which i would like to be cleared if a checkbox is clicked. It should work with an infinite number of products. I'm the worst on javascript so i hope i could get an answer?
Sample:
$('.product .question-input').change(function() {
if ($(this).is(':checked')) { //radio is now checked
$('.product .question-checkbox').prop('checked', false);
}
return false;
});
$('.product .question-checkbox').change(function() {
if ($(this).is(':checked')) {
$('.product .question-input').prop('checked', false);
}
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
<div class="form-inline justify-content-center">
<div class="container text-center">
<div class="product-title">Adobe</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">1
<input class="form-check-input question-input" type="radio" name="test-1" id="test-1" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">2
<input class="form-check-input question-input" type="radio" name="test-1" id="test-2" value="2"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">3
<input class="form-check-input question-input" type="radio" name="test-1" id="test-3" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">4
<input class="form-check-input question-input" type="radio" name="test-1" id="test-4" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-1">5
<input class="form-check-input question-input" type="radio" name="test-1" id="test-5" value="1"></label></div>
</div>
</div>
<div class="form-group form-check text-center the-checkbox">
<input type="checkbox" name="check-1" class="form-check-input question-checkbox" id="check-1">
<label class="form-check-label" for="check-1">I don't use this product for work</label>
</div>
</div>
</div>
<div class="product">
<div class="form-inline justify-content-center">
<div class="container text-center">
<div class="product-title">Mocups</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">1
<input class="form-check-input question-input" type="radio" name="test-2" id="test-1" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">2
<input class="form-check-input question-input" type="radio" name="test-2" id="test-2" value="2"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">3
<input class="form-check-input question-input" type="radio" name="test-2" id="test-3" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">4
<input class="form-check-input question-input" type="radio" name="test-2" id="test-4" value="1"></label></div>
<div class="form-check form-check-inline">
<label class="form-check-label" for="test-2">5
<input class="form-check-input question-input" type="radio" name="test-2" id="test-5" value="1"></label></div>
</div>
</div>
<div class="form-group form-check text-center the-checkbox">
<input type="checkbox" name="check-1" class="form-check-input question-checkbox" id="check-1">
<label class="form-check-label" for="check-1">I don't use this product for work</label>
</div>
</div>
</div>
By passing a reference to a handler instead of directly passing the handler function:
function handler() {
if ($(this).is(':checked')) {
$('.product .question-input').prop('checked', false);
}
return false;
}
$('.product .question-input').change(handler);
$('.product .question-checkbox').change(handler);
You can not to this with the same class names for every group, you need to separate the classes in html and create functions for each of them like this:
$('.product1 .question-checkbox1').change(function() {
if ($(this).is(':checked')) {
$('.product1 .question-input1').prop('checked', false);
}
return false;
});
end then product2, product3...
Related
This has been driving me crazy for hours. I'm trying to get an array with the values of all "checked" checkboxes when "All" is selected. For some reason, on my site, when I check "All" it returns an empty set, but when I uncheck it the correct values are returned.
The craziest part is that I made a CodePen with the stripped down code and it works as expected, and I can't figure out what is different about my site.
The checkbox is the one above the States that says "All" here: https://dev.vmc.w3.uvm.edu/xana/climateIndicators/table
//check all state checkboxes
$('#all_states').click(function() {
checkCheckboxes(this.id, 'all_states__checkboxes');
});
function checkCheckboxes(id, pID) {
$('#' + pID).find(':checkbox').each(function() {
jQuery(this).prop('checked', $('#' + id).is(':checked'));
});
}
//state filter
$('.state_checkbox').on('click', function() {
var search = [];
$('.state_sub_checkbox:checked').each(function() {
var group = $(this).val();
search.push(group.trim());
});
console.log(search);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
My HTML code: ```
<div class="px-3 py-3">
<form>
<div class="form-group form-check mb-2">
<input type="checkbox" class="form-check-input state_checkbox" id="all_states">
<label class="form-check-label" for="All">All</label>
</div>
<div class="row pl-3" id="all_states__checkboxes">
<div class="col-lg">
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="CT" id="Connecticut">
<label class="form-check-label" for="Connecticut">Connecticut</label>
</div>
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="ME" id="Maine">
<label class="form-check-label" for="Maine">Maine</label>
</div>
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="MA" id="Massachussetts">
<label class="form-check-label" for="Massachussetts">Massachussetts</label>
</div>
</div>
<div class="col-lg">
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="NH" id="NewHampshire">
<label class="form-check-label" for="NewHampshire">New Hampshire</label>
</div>
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="NY" id="NewYork">
<label class="form-check-label" for="NewYork">New York</label>
</div>
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="VT" id="NewYork">
<label class="form-check-label" for="Vermont">Vermont</label>
</div>
</div>
</div>
</form>
</div>
Try
$('#all_states__checkboxes').on('click', function() {
const all= $('[type=checkbox]',this).length
const checked = $('[type=checkbox]:checked',this).length
$('#all_states').prop('checked', all===checked);
});
$('#all_states').on('click',function() {
$('#all_states__checkboxes [type=checkbox]').attr('checked',this.checked)
})
I have created js/html page and result of this page i am trying to send to mail box.Currently i am using
<a id="toemail" class="btn btn-link" href="mailto:youremail#domain.com?subject=Survey response&body=">Send to
email</a> <button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
But it is opening the option to select a mail box and than you can send it typing mail id.But i want something like a box in which whatever mail id i have write mail should be send to that mail box.
Below is the code :-
Js file
function displayRadioValue() {
let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
let section1Total = 0
let section2Total = 0
let section1Question = 0
let section2Question = 0
let finalResults = document.querySelector('.final-results')
let result1 = ''
let result2 = ''
finalResults.innerHTML = ''
//Section 1
section1.forEach(function(radio, index) {
if (radio.checked) {
section2Question++
section1Total += +radio.value
}
})
//Section 2
section2.forEach(function(radio, index) {
if (radio.checked) {
section1Question++
section2Total += +radio.value
}
})
//Final Results and validation
if (section1Total > 0 && section2Total > 0) {
finalResults.innerHTML += genTable(section1Question, section1Total, 1)
finalResults.innerHTML += genTable(section2Question, section2Total, 2)
document.getElementById("control").style.display = "block";
document.getElementById("toemail").href += document.querySelector(".final-results").innerText;
} else {
finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section '
}
}
function genTable(ques, total, section) {
var result = "<b>Section " + section + ":</b><br>"
var tr = "<tr><th>" + total + "</th><th>" + ((total / (ques * 3)) * 100).toFixed(2) + "</th></tr>"
result += "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>" + tr + "</tbody></table>"
return result
}
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<title>Survey Question</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<style>
</style>
<section class="container py-4">
<div class="row">
<div class="col-md-12">
<h2>Survey</h2>
<ul id="tabs" class="nav nav-tabs">
<li class="nav-item">Section 1</li>
<li class="nav-item">Section 2</li>
<li class="nav-item">Results</li>
</ul>
<br>
<div id="tabsContent" class="tab-content">
<div id="section1" class="tab-pane fade active show">
<div class="section-1-questions">
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 1:</legend>
<div class="col-sm-10">
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1">
<label class="form-check-label" for="gridRadios1">
1
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input " type="radio" name="question1" id="gridRadios2" value="2">
<label class="form-check-label" for="gridRadios2">
2
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3">
<label class="form-check-label" for="gridRadios3">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 2:</legend>
<div class="col-sm-10">
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios4" value="1">
<label class="form-check-label" for="gridRadios4">
1
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios5" value="2">
<label class="form-check-label" for="gridRadios5">
2
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="3">
<label class="form-check-label" for="gridRadios6">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 3:</legend>
<div class="col-sm-10">
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios7" value="1">
<label class="form-check-label" for="gridRadios7">
1
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios8" value="2">
<label class="form-check-label" for="gridRadios8">
2
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios9" value="3">
<label class="form-check-label" for="gridRadios9">
3
</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div id="section2" class="tab-pane fade">
<div class="section-2-question">
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question4" id="gridRadios10" value="1">
<label class="form-check-label" for="gridRadios10">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question4" id="gridRadios11" value="2">
<label class="form-check-label" for="gridRadios11">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question4" id="gridRadios12" value="3">
<label class="form-check-label" for="gridRadios12">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 5:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question5" id="gridRadios13" value="1">
<label class="form-check-label" for="gridRadios13">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question5" id="gridRadios14" value="2">
<label class="form-check-label" for="gridRadios14">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question5" id="gridRadios15" value="3">
<label class="form-check-label" for="gridRadios15">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question6" id="gridRadios16" value="1">
<label class="form-check-label" for="gridRadios16">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question6" id="gridRadios17" value="2">
<label class="form-check-label" for="gridRadios17">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question6" id="gridRadios18" value="3">
<label class="form-check-label" for="gridRadios18">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question7" id="gridRadios19" value="1">
<label class="form-check-label" for="gridRadios19">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question7" id="gridRadios20" value="2">
<label class="form-check-label" for="gridRadios20">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question7" id="gridRadios21" value="3">
<label class="form-check-label" for="gridRadios21">
3
</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div id="results" class="tab-pane fade">
<div class="final-results"></div>
<br>
<button type="button" class="btn btn-success" onclick="displayRadioValue()">
Show Results
</button>
<br>
<br>
<div id="control" style="display: none">
<a id="toemail" class="btn btn-link" href="mailto:youremail#domain.com?subject=Survey response&body=">Send to
email</a> <button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Style sheet:-
#media print {
body * {
visibility: hidden;
}
.final-results * {
visibility: visible;
}
.final-results {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
}
table,
table tr th,
table tr td {
border: 1px solid black;
}
You can add a form HTML with email input in it to store the email address user entered so that can use to send to mail
On clicking Send to email button you will just a form where user can type in the email address with send button in it. If user decide to change the mind i have added a close button as well to hide the form.
When you have entered the email address you can press send button and its will generate the href data so that can be used as mail data. In there you will the user typed email address will be there as to Email.
Lastly, if you did not type anything in the email address input you will see an alert will popup which will tell you enter an email address.
Live Working Demo:
function displayRadioValue() {
let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
let section1Total = 0
let section2Total = 0
let section1Question = 0
let section2Question = 0
let finalResults = document.querySelector('.final-results')
let result1 = ''
let result2 = ''
finalResults.innerHTML = ''
//Section 1
section1.forEach(function(radio, index) {
if (radio.checked) {
section2Question++
section1Total += +radio.value
}
})
//Section 2
section2.forEach(function(radio, index) {
if (radio.checked) {
section1Question++
section2Total += +radio.value
}
})
//Final Results and validation
if (section1Total > 0 && section2Total > 0) {
finalResults.innerHTML += genTable(section1Question, section1Total, 1)
finalResults.innerHTML += genTable(section2Question, section2Total, 2)
document.getElementById("control").style.display = "block";
} else {
finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section '
}
}
function genTable(ques, total, section) {
var result = "<b>Section " + section + ":</b><br>"
var tr = "<tr><th>" + total + "</th><th>" + ((total / (ques * 3)) * 100).toFixed(2) + "</th></tr>"
result += "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>" + tr + "</tbody></table>"
return result
}
//Show email input form
let showEmailInput = document.querySelector('.toemail-form')
function toEmail() {
showEmailInput.classList.remove('d-none') //show form
let finalResults = document.querySelector('.final-results').innerText;
let sendEmail = document.querySelector('.toEmail')
sendEmail.addEventListener('click', function() {
let getEmail = document.querySelector('#exampleInputEmail1') //get value
if (getEmail.value == '') {
alert('Please enter a valid email address')
} else {
sendEmail.href = 'mailto:' + getEmail.value + '?subject=Survey response&body=' + finalResults //assign the email structure
getEmail.value = '' //set value to null
}
})
}
//Close email input form
function closeToEmail(e) {
e.preventDefault()
showEmailInput.classList.add('d-none') //hide form
}
#media print {
body * {
visibility: hidden;
}
.final-results * {
visibility: visible;
}
.final-results {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
}
table,
table tr th,
table tr td {
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Survey Question</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<style>
</style>
<section class="container py-4">
<div class="row">
<div class="col-md-12">
<h2>Survey</h2>
<ul id="tabs" class="nav nav-tabs">
<li class="nav-item">Section 1</li>
<li class="nav-item">Section 2</li>
<li class="nav-item">Results</li>
</ul>
<br>
<div id="tabsContent" class="tab-content">
<div id="section1" class="tab-pane fade active show">
<div class="section-1-questions">
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 1:</legend>
<div class="col-sm-10">
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1">
<label class="form-check-label" for="gridRadios1">
1
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input " type="radio" name="question1" id="gridRadios2" value="2">
<label class="form-check-label" for="gridRadios2">
2
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3">
<label class="form-check-label" for="gridRadios3">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 2:</legend>
<div class="col-sm-10">
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios4" value="1">
<label class="form-check-label" for="gridRadios4">
1
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios5" value="2">
<label class="form-check-label" for="gridRadios5">
2
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="3">
<label class="form-check-label" for="gridRadios6">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 3:</legend>
<div class="col-sm-10">
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios7" value="1">
<label class="form-check-label" for="gridRadios7">
1
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios8" value="2">
<label class="form-check-label" for="gridRadios8">
2
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios9" value="3">
<label class="form-check-label" for="gridRadios9">
3
</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div id="section2" class="tab-pane fade">
<div class="section-2-question">
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question4" id="gridRadios10" value="1">
<label class="form-check-label" for="gridRadios10">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question4" id="gridRadios11" value="2">
<label class="form-check-label" for="gridRadios11">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question4" id="gridRadios12" value="3">
<label class="form-check-label" for="gridRadios12">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 5:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question5" id="gridRadios13" value="1">
<label class="form-check-label" for="gridRadios13">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question5" id="gridRadios14" value="2">
<label class="form-check-label" for="gridRadios14">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question5" id="gridRadios15" value="3">
<label class="form-check-label" for="gridRadios15">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question6" id="gridRadios16" value="1">
<label class="form-check-label" for="gridRadios16">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question6" id="gridRadios17" value="2">
<label class="form-check-label" for="gridRadios17">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question6" id="gridRadios18" value="3">
<label class="form-check-label" for="gridRadios18">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question7" id="gridRadios19" value="1">
<label class="form-check-label" for="gridRadios19">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question7" id="gridRadios20" value="2">
<label class="form-check-label" for="gridRadios20">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question7" id="gridRadios21" value="3">
<label class="form-check-label" for="gridRadios21">
3
</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div id="results" class="tab-pane fade">
<div class="final-results"></div>
<br>
<button type="button" class="btn btn-info" onclick="displayRadioValue()">
Show Results
</button>
<br>
<br>
<div id="control" style="display: none">
<button class="btn btn-primary" onclick="toEmail()">Send to Mail</button> <button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
</div>
<form>
<div class="form-group d-none toemail-form">
<label for="exampleInputEmail1">Enter Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">Enter email address above</small>
<a class="btn btn-success toEmail" href="#" role="button">Send</a>
<button class="btn btn-danger" onclick="closeToEmail(event)">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
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>