How to get label values of checkbox in javascript - javascript

I have two checkbox, depending upon,which checkbox user clicks, I need to call other function, however, I'm not abler to get the checkbox label values.
Here is my code :
function getLabel(id)
{
return $("#"+id).next().text();
}
function BillStatus(){
console.log("its here");
var label=getLabel('checkboxid1');
console.log(label);
if(label=="No") {
//some function to call here
}else{
//other function to call here
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="check1">
<label>
<input type="checkbox" name="myCheckbox" id="checkboxid1" onclick="BillStatus()" style="visibility: visible"/>
Yes
</label>
</div>
<br>
<div id="check2">
<label>
<input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" onclick="BillStatus()" style="visibility: visible" />
No
</label>
</div>

You've several typos in your code, but the main problem comes from the return line, you should use parent() instead of next() :
return $("#"+id).parent().text().trim();
NOTE : Use trim() to remove the extra spaces from the label text returned.
Hope this helps.
function getLabel(id)
{
return $("#"+id).parent().text().trim();
}
function BillStatus(_this){
console.log("its here");
var label=getLabel(_this.id);
console.log(label);
if( $(_this).parent().text().trim() === "No"){
console.log("Nooooo");
}else{
console.log("Yessss");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="check1">
<label>
<input type="checkbox" name="myCheckbox" id="checkboxid1" onclick="BillStatus(this)" style="visibility: visible" /> Yes
</label>
</div>
<br>
<div id="check2">
<label>
<input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" onclick="BillStatus(this)" style="visibility: visible" />No
</label>
</div>
Since you're using jQuery the alternative solution will attach the click event to the common class and get the label from the currently clicked one like the example below.
$('.checkbox-container input:checkbox').on('click', function()
{
if( $(this).parent().text().trim() === "No"){
console.log("Nooooo");
}else{
console.log("Yessss");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="check1" class="checkbox-container">
<label>
<input type="checkbox" name="myCheckbox" id="checkboxid1"/> Yes
</label>
</div>
<br>
<div id="check2" class="checkbox-container">
<label>
<input type="checkbox" id="checkboxid2" name="myCheckbox" value="No"/>No
</label>
</div>

You need to add the this keyword as parameter to your BillStatus functions.
Instead of getLabel you can simply write:
ele.parentElement.textContent.trim();
You need to use the onchange event instead of onclick.
function BillStatus(ele) {
var label=ele.parentElement.textContent.trim();
console.log('Label: ' + label + ' Checked: ' + ele.checked);
if(label=="No") {
//some function to call here
}else{
//other function to call here
}
}
<div id="check1">
<label>
<input type="checkbox" name="myCheckbox" id="checkboxid1" onchange="BillStatus(this)" style="visibility: visible"
/> Yes</label>
</div>
<br>
<div id="check2">
<label>
<input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" onchange="BillStatus(this)" style="visibility: visible" />No</label>
</div>
A full javascript version, without inline code is:
document.addEventListener('DOMContentLoaded', function(e) {
document.querySelectorAll('div[id^=check] [type="checkbox"]').forEach(function(ele, idx) {
ele.addEventListener('change', function(e) {
var label = this.parentElement.textContent.trim();
console.log('Label: ' + label + ' Checked: ' + this.checked);
if(label=="No") {
//some function to call here
}else{
//other function to call here
}
})
})
})
//
// on document ready
//
document.addEventListener('DOMContentLoaded', function(e) {
//
// for each div having aan id starting with and having a checkbox...
//
document.querySelectorAll('div[id^=check] [type="checkbox"]').forEach(function(ele, idx) {
//
// add the change event handler
//
ele.addEventListener('change', function(e) {
var label = this.parentElement.textContent.trim();
console.log('Label: ' + label + ' Checked: ' + this.checked);
if(label=="No") {
//some function to call here
}else{
//other function to call here
}
})
})
})
<div id="check1">
<label>
<input type="checkbox" name="myCheckbox" id="checkboxid1" style="visibility: visible"
/> Yes</label>
</div>
<br>
<div id="check2">
<label>
<input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" style="visibility: visible" />No</label>
</div>

you can try $("input[type='checkbox']:checked:last").next().text()
function getLabel(id)
{
return $("#"+id).next().text();
}
function BillStatus(){
console.log("its here");
var label = $("input[type='checkbox']:checked:last").next().text();
label = $.trim(label);
if(label== "No") {
console.log("No is checked");
}else if(label== "Yes") {
console.log("Yes is checked");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="check1">
<input type="checkbox" name="myCheckbox" id="checkboxid1" onclick="BillStatus()" style="visibility: visible"/>
<label>
Yes
</label>
</div>
<br>
<div id="check2">
<input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" onclick="BillStatus()" style="visibility: visible" />
<label>
No
</label>
</div>

I think your are selecting the next dom element instead of parent element.Please refer this bin.
function getLabel(id)
{
return $("#"+id).parent().text().trim();
}
function BillStatus(){
var elem=this.event.target.id;
var label=getLabel(elem);
console.log(label);
if(label=="No") {
alert(label)
}else{
alert(label)
}
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="check1">
<label>
<input type="checkbox" name="myCheckbox" id="checkboxid1" onclick="BillStatus()" style="visibility: visible"
/> Yes</label>
</div>
<br>
<div id="check2">
<label>
<input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" onclick="BillStatus()" style="visibility: visible" />No</label>
</div>
</body>
</html>

Related

I am trying to hide an input and show it with jquery but the input is not showing

if($('#yes').prop('checked')){
$('#phone-num').show();
}else{
$('#phone-num').hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for=" yes"> Phone Me concerning this case:<input type="checkbox" name="phone_me" id="yes" /></label>
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" />
You need in order to do that to listen to the click on your checkbox.
You code - as you did it - only execute itself one time at the loading of the page.
In the snippet below, a listener is added to the checkbox and is triggered every time you click on it.
$('#yes').click(function() {
var isChecked = $(this).prop('checked');
if (isChecked) {
$('#phone-num').show();
} else {
$('#phone-num').hide();
}
});
#phone-num {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="yes"> Phone Me concerning this case: </label>
<input type="checkbox" name="phone_me" id="yes" />
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" />
Add a listener for the checkbox change.
If you don't want the checkbox to be visible the first time, you can add a style with display:none to hide it.
$('#yes').change(
function(){
//console.log("check if checked!");
if ($(this).is(':checked')) {
$('#phone-num').show();
}
else
{
$('#phone-num').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for=" yes"> Phone Me concerning this case:<input type="checkbox" name="phone_me" id="yes" /></label>
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" style="display:none;" />
You can hide the input by default, then add an on click handler to the check box and toggle visibility
$(function() {
$(document).on('click', '#yes', function() {
$('#phone-num').toggle();
});
});
#phone-num {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for=" yes"> Phone Me concerning this case:<input type="checkbox" name="phone_me" id="yes" /></label>
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" />

Filter all visible lists with inputs in form jquery

I am developing form.
What I need is when a user tries to go to another page with empty VISIBLE fields/checkboxes/radios these fields/checkboxes/radios should become red.
Filters for checkboxes: min 1, max 5.
My jQuery
const max = 5;
const min = 1;
const minCheckedCheckboxes = 1;
$('input.checkbox').on('click', function(evt) {
const checkboxes = $(this).closest('.cd-form-list-inner').find('input:checked');
if(checkboxes.length > max) {
alert('You can select only 5 checkboxes');
return false;
}
});
$('.next').click(function() {
let error = false;
$(['input[required]:visible', 'textarea[required]:visible']).each(function(index, selector) {
$(selector).each(function(index, input) {
error = error == true ? error : $(input).val() == '';
});
});
$('.parent:visible').each(function(index, group){
if(error == true) {
error = error;
}
else {
error = $('input:checked', group).length < minCheckedCheckboxes;
}
});
if(error == false) {
error =! $('input[type=radio]:required').is(':checked');
}
if(error) {
$('input[required]:visible, textarea[required]:visible').removeClass("error");
$('input[required]:visible, textarea[required]:visible').filter(function() {
return !this.value;
}).addClass('error');
return alert('Not all required fields are filled');
}
alert('All required fields are filled');
});
Here is jsFiddle
Check if below code works for you!
Looped on all desired inputs.
Checked the input type while looping, accordingly created the condition to add the error class, also maintained the elem on which error class needs to be added.
Then if condition is true then added error class to elem.
const max = 5;
const min = 1;
$('.next').click(function() {
$('input[required]:visible,textarea[required]:visible,input[type="checkbox"]:visible').each(function(index, selector) {
var elem;
if ($(this).is(":checkbox") || $(this).is(":radio")) {
var pDiv = $(this).parents("div").first();
var condition = false;
elem = pDiv;
if ($(this).is(":radio")) {
condition = pDiv.find("[type='radio']:checked").length <= 0
} else {
condition = pDiv.find("[type='checkbox']:checked").length < min || pDiv.find("[type='checkbox']:checked").length > max;
}
} else {
condition = !$(this).val();
elem = $(this);
}
if (condition) {
elem.addClass('error');
} else {
elem.removeClass('error');
}
});
});
.error {
background-color: pink;
border-color: red;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<p>press button</p>
<input type="text" required/>
<input type="text" required style="display: none" />
<div>
<textarea cols="5" required placeholder="textarea"></textarea>
</div>
<div>
<textarea cols="5" required placeholder="textarea" style="display:none"></textarea>
</div>
<div class="parent">
<p>this div should be red</p>
<div>
<input type="radio" required>
</div>
</div>
<div class="parent" display: none>
<p>this div shouldn't be red</p>
<div>
<input type="radio" checked required>
</div>
</div>
<div style="display:none">
<p>this div shouldn't be red</p>
<input type="radio" required>
</div>
<div class="parent">
<p>this div shouldn't be red</p>
<div class="cd-form-list-inner checkboxes">
<input type="checkbox" class="checkbox" checked>
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
</div>
</div>
<div class="parent" style="display: none;">
<p>this div shouldn't be red</p>
<div class="cd-form-list-inner checkboxes">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
</div>
</div>
<div class="parent">
<p>this div should be red</p>
<div class="cd-form-list-inner checkboxes">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
</div>
</div>
<div>
<button class="next">Next page</button>
</div>

Select several checkboxes in the same group

So I have a set of checkboxes, where I can only check one box per group, how do I change so I can check multiple boxes per group?
Codepen: http://codepen.io/anon/pen/dNwqzx
$(document).ready(function() {
$(".filterGenius input").each(function() {
if (window.location.href.indexOf($(this).val()) >= 0) {
$(this).attr("checked", "checked")
}
});
$(".filterGenius select option").each(function() {
if (window.location.href.indexOf($(this).val()) >= 0) {
$(this).attr('selected', true);
}
});
$(".filterGenius input").change(function() {
var s = encodeURI(unescape(jQuery.query.set("fss", getFSS())));
var o = window.location.href.split("?")[0];
$(".filterGenius input").attr("disabled", true);
window.location.href = o + s
});
});
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});
<div class="filterGenius">
<div class="col">
<b>Manufacturer</b>
<br>
<input type="checkbox" name="Manufacturer" value="HP" /> <span class "filtertext">HP</span>
<br>
<input type="checkbox" name="Manufacturer" value="Dell" /> <span class "filtertext">Dell</span>
<br>
<input type="checkbox" name="Manufacturer" value="Lenovo" /> <span class "filtertext">Lenovo</span>
<br>
<input type="checkbox" name="Manufacturer" value="Apple" /> <span class "filtertext"> Apple</span>
<br>
<input type="checkbox" name="Manufacturer" value="Acer" /> <span class "filtertext">Acer</span>
<br>
<input type="checkbox" name="Manufacturer" value="Asus" /> <span class "filtertext"> Asus</span>
<br>
</div>
<div class="col">
<b>OS</b>
<br>
<input type="checkbox" name="OS" value="W7H" /> <span class "filtertext">W7H</span>
<br>
<input type="checkbox" name="OS" value="Bing" /> <span class "filtertext">Bing</span>
<br>
<input type="checkbox" name="OS" value="W7P" /> <span class "filtertext">W7P</span>
<br>
<input type="checkbox" name="OS" value="W8P" /> <span class "filtertext">W8P</span>
<br>
<input type="checkbox" name="OS" value="W8.1P" /> <span class "filtertext">W8.1P</span>
<br>
<input type="checkbox" name="OS" value="Freedos" /> <span class "filtertext">Freedos</span>
<br>
<input type="checkbox" name="OS" value="CMAR" /><span class "filtertext"> CMAR</span>
<br>
<input type="checkbox" name="OS" value="COA" /><span class "filtertext"> COA</span>
<br>
</div>
</div>
The last jquery function prevents you from checking multiple boxes. From what I can tell that's all it does. Remove it and you should be able to check as many boxes as you like!
$(document).ready(function () {
$(".filterGenius input").each(function () {
if (window.location.href.indexOf($(this).val()) >= 0) {
$(this).attr("checked", "checked")
}
});
$(".filterGenius select option").each(function () {
if (window.location.href.indexOf($(this).val()) >= 0) {
$(this).attr('selected', true);
}
});
$(".filterGenius input").change(function () {
var s = encodeURI(unescape(jQuery.query.set("fss", getFSS())));
var o = window.location.href.split("?")[0];
$(".filterGenius input").attr("disabled", true);
window.location.href = o + s
});
});
//$('input[type="checkbox"]').on('change', function() {
//$('input[name="' + this.name + '"]').not(this).prop('checked', //false);
//});
<div class="filterGenius">
<div class="col">
<b>Manufacturer</b><br>
<input type="checkbox" name="Manufacturer_1" value="HP" /> <span class"filtertext">HP</span><br>
<input type="checkbox" name="Manufacturer_2" value="Dell" /> <span class"filtertext">Dell</span><br>
<input type="checkbox" name="Manufacturer_3" value="Lenovo" /> <span class"filtertext">Lenovo</span><br>
<input type="checkbox" name="Manufacturer_4" value="Apple" /> <span class"filtertext"> Apple</span><br>
<input type="checkbox" name="Manufacturer_5" value="Acer" /> <span class"filtertext">Acer</span><br>
<input type="checkbox" name="Manufacturer_6" value="Asus" /> <span class"filtertext"> Asus</span><br>
</div>
<div class="col">
<b>OS</b><br>
<input type="checkbox" name="OS_1" value="W7H" /> <span class"filtertext">W7H</span><br>
<input type="checkbox" name="OS_2" value="Bing" /> <span class"filtertext">Bing</span><br>
<input type="checkbox" name="OS_3" value="W7P" /> <span class"filtertext">W7P</span><br>
<input type="checkbox" name="OS_4" value="W8P" /> <span class"filtertext">W8P</span><br>
<input type="checkbox" name="OS_5" value="W8.1P" /> <span class"filtertext">W8.1P</span><br>
<input type="checkbox" name="OS_6" value="Freedos" /> <span class"filtertext">Freedos</span><br>
<input type="checkbox" name="OS_7" value="CMAR" /><span class"filtertext"> CMAR</span><br>
<input type="checkbox" name="OS_8" value="COA" /><span class"filtertext"> COA</span><br>
</div>
</div>
This should (hopefully) achieve what you are setting out to do - as #Yunus Saha pointed out
just comment or delete thise lines:
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});
I think you may need value of the each checked checkbox so better
Change the name attribute to be unique for each checkbox or use it as an array.
example of Manufacturer checkbox:
<input type="checkbox" name="Manufacturer[]" value="HP" />
do the same for other checkboxes too.
Remove this lines from the javascript codes (last three rows)
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
});

Javascript conditionals not working on correct button combination

I have 5 if else conditions under function getRadioButtonValue. The function does not go through all the conditions even after clicking the right button combinations.
I have tried to debug the script using Chrome Developer tools but the problem still exists. Where is the code breaking?
Some information regarding the page, I am using Javascript to hide the div's and headers so that at any one time there is only one question seen.
Only the first if conditions work, but nothing else
The results are seen after Get Result button is clicked on the last page which should redirect to the appropriate page.
[DELETED CODE]
[UPDATED CODE]
I am unable to auto hide my div's based on the response given below by Keith.
FYI: His code works as expected.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.hidden {
display: none;
}
.visible {
display: block;
margin: 0 auto;
width: 650px;
height: 445px;
background: #EFDFBC;
}
</style>
</head>
<body>
<div id="first-question" class="visible">
<h3>How?</h3>
<ul>
<li>abc</li>
<li>def</li>
</ul>
<hr>
<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
</div>
<div id="second-question" class="hidden">
<h3>To</h3>
<hr>
<input type="radio" name="quiz-question-two" id="quiz-question-two-yes" value="yes" />
<label for="quiz-question-two-yes" id="twoYes">Yes</label>
<input type="radio" name="quiz-question-two" id="quiz-question-two-no" value="no" />
<label for="quiz-question-two-yes" id="twoNo">No</label>
</div>
<div id="third-question" class="hidden">
<h3>Make </h3>
<hr>
<input type="radio" name="quiz-question-three" id="quiz-question-three-yes" value="yes" />
<label for="quiz-question-three-yes" id="threeYes">Yes</label>
<input type="radio" name="quiz-question-three" id="quiz-question-three-no" value="no" />
<label for="quiz-question-three-yes" id="threeNo">No</label>
</div>
<div id="fourth-question" class="hidden">
<h3>This</h3>
<hr>
<input type="radio" name="quiz-question-four" id="quiz-question-four-yes" value="yes" />
<label for="quiz-question-four-yes" id="fourYes">Yes</label>
<input type="radio" name="quiz-question-four" id="quiz-question-four-no" value="no" />
<label for="quiz-question-four-yes" id="fourNo">No</label>
</div>
<div id="fifth-question" class="hidden">
<h3>Work?</h3>
<hr>
<input type="radio" name="quiz-question-five-yes" id="quiz-question-five-yes" value="yes" />
<label for="quiz-question-five-yes" id="fiveYes">Yes</label>
<input type="radio" name="quiz-question-five-no" id="quiz-question-five-no" value="no" />
<label for="quiz-question-five-yes" id="fiveNo">No</label>
</div>
<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
</body>
</html>
<script type="text/javascript">
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if (r.quiz-question-one && r.quiz-question-two && r.quiz-question-three && r.quiz-question-four && r.quiz-question-five) {
rt.text('All Yes');
} else if (!r.quiz-question-one && !r.quiz-question-two && !r.quiz-question-three && !r.quiz-question-four && !r.quiz-question-five) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}
$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.hidden'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('visible');
next_page.addClass('visible');
if (next_page.hasClass('result')) updateResult();
});
});
</script>
I've created an example below that I think you can work from. The values from the radio I don't think get updated until you submit, instead I've captured the results in the onclick. You can now add back you CSS styling etc. Hope that helps.
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if (r.q1 && r.q2 && r.q3) {
rt.text('All Yes');
} else if (!r.q1 && !r.q2 && !r.q3) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}
$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.page'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('active');
next_page.addClass('active');
if (next_page.hasClass('result')) updateResult();
});
});
.page {
display: none;
}
.page.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page active">
<div>Question 1</div>
<label for="q1yes">Yes</label>
<input id="q1yes" type="radio" name="q1" value="yes">
<label for="q1no">No</label>
<input id="q1no" type="radio" name="q1" value="no">
</div>
<div class="page">
<div>Question 2</div>
<label for="q2yes">Yes</label>
<input id="q2yes" type="radio" name="q2" value="yes">
<label for="q2no">No</label>
<input id="q2no" type="radio" name="q2" value="no">
</div>
<div class="page">
<div>Question 3</div>
<label for="q3yes">Yes</label>
<input id="q3yes" type="radio" name="q3" value="yes">
<label for="q3no">No</label>
<input id="q3no" type="radio" name="q3" value="no">
</div>
<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
<input type="radio" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
In the above you are using type="radio", that means all type="radio" with the same name will group together, and not just these two. To group together just give them a name on the input. eg.
<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
Above you can see I've given the 2 inputs the name="quiz-question-one", and then for the next question maybe give them a name="quiz-question-two" etc..
On another note, there are lots of places where your code could be simplified, but hopefully this will solve your current problem.

Check box class based click function not working

I am trying to find out which check box is selected in a group of check boxes and read its value.
The following is the checkbox format
<div class="panel-body smoothscroll maxheight300 brand_select">
<div class="block-element">
<label>
<input type="checkbox" name="term" value="0" />
Armani </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="1" />
Gucci </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="2" />
Louis Vuitton </label>
</div>
</div>
I tried giving class names but it didn't work. I gave class names as class="brand_name" and tried to read through jquery click function
$('.brand_name').click(function () {
console.log("click worked")
});
But it didn't work. Can someone suggest me a way to do this.
You are applying the click event handler on div and not on checkboxes
$('.brand_select').on('click', ':checkbox', function() {
alert($(this).is(':checked'));
});
To get list of all checked values:
$('.brand_select').on('click', ':checkbox', function() {
var checkedEl = [];
$('.brand_name :checkbox').each(function () {
if ($(this).is(':checked')) {
checkedEl.push($(this).val());
}
});
console.log('Checked values');
console.log(checkedEl);
});
$('input[type="checkbox"]').on('click',function () {
if(this.checked){
alert($(this).val());
}else{
// .........
}
})
Add the class to input elements and change the name of the fields so that you can use them as array -
<input type="checkbox" name="term[]" value="2" class="brand_name"/>
Here is a possible solution:
$('input[name="term"]').on('change', function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-body smoothscroll maxheight300 brand_select">
<div class="block-element">
<label>
<input type="checkbox" name="term" value="0" />
Armani </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="1" />
Gucci </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="2" />
Louis Vuitton </label>
</div>
</div>

Categories