We Keep Coding

JQuery - show second checkbox when ticking first

This is my simple example I'm currently stuck on. I'm trying to get a 2nd checkbox to appear, if I click on the first one.
In the example below (demo: https://jsfiddle.net/d2ykzjvg/1/) you can see that both checkboxes appear when the page loads.
If I click the red one saying "1st" then nothing happens. If I remove the tick from the first checkbox, the blue "2nd" box is hidden.
If I then tick the red one again, the blue one appears, and toggles on and off when I toggle the red checkbox.
I don't know how to get the blue checkbox to be hidden when the page first loads.
HTML
<form action="#" method="post">
<div class="label label-danger">
<label for="rev"><input id="rev" type="checkbox" name="rev" id="rev" value="y"> 1st</label>
</div>
<div class="label label-primary" id="r2">
<label for="rev_inc"><input type="checkbox" name="rev_inc" id="rev_inc" value="y"> 2nd</label>
</div>
</form>
Javascript
$(function() {
$('#rev').change(function() {
if($(this).is(":checked")) {
$('#r2').show();
}
else{
$('#r2').hide();
}
});
});
JSFiddle: https://jsfiddle.net/d2ykzjvg/1/

You should use style="display:none" like this:
<label for="rev_inc"><input type="checkbox" name="rev_inc" id="rev_inc" value="y" style="display:none;"> 2nd</label>
In order to hide it on page-load

You need to hide first your 2nd checkbox
$(document).ready(function(){
$('#r2').hide();
$('#rev').change(function() {
if($(this).is(":checked")) {
$('#r2').show();
}
else {
$('#r2').hide();
}
});
});

Simple. Just add $('#r2').hide(); this on page load function.
OR add this css below:
#r2{
display:none;
}

Put an inline style in your second div like this
<div class="label label-primary" id="r2" style="display:none;">
<label for="rev_inc"><input type="checkbox" name="rev_inc" id="rev_inc" value="y"> 2nd</label>
</div>
Updated fiddle : https://jsfiddle.net/d2ykzjvg/2/

You can hide the div on "documentReady" or you can add style ( display : none )
$(function() {
$('#r2').hide();
$('#rev').change(function() {
if ($(this).is(":checked")) {
$('#r2').show();
} else {
$('#r2').hide();
}
});
});
or
<style>
#r2 { display:none; }
</style>

jQuery if/else based on input value

I have a list of questions that a person can answer yes or no to. At the end, I want to display the question, whether they answered yes or no, and a paragraph about the results. I'm having trouble getting my if/else statement to work.
HTML:
<ol>
<li id='q1'>
<span>Are any of your valuables visible from the street?</span>
<input type="checkbox" class="calc" name="street" value="-1" /> yes
<input type="checkbox" class="calc" name="street" value="1" /> no
<input type="checkbox" name="street" value="0" /> n/a
</li>
</ol>
<div class='darkBtn' id='results'>Get Results ></div>
JS:
$('#results').click(function(){
var q1 = $('li#q1 input:checkbox:checked.calc').val();
if (q1 == 1) {
console.log("You answered No");
} else {
console.log("You answered Yes");
}
});
I've tried every variation I can think of, but the console always prints out "You answered Yes".

It looks like you mean to use radio buttons instead of checkboxes. I put together a quick fiddle of your example using radio buttons.
$(function(){
$("#results").click(function(){
var val = $('input[name=street]:checked').val();
if(val == 1) {
console.log('no');
} else {
console.log('yes');
}
});
});
fiddle

First your checkboxes should not have the same name attribute.
Then you should grab the selected questions using:
$('li#q1 input[type="checkbox"].calc:checked')
Also it appears that you want radio boxes instead of check boxes, in which case you'd be able to use the same name
UPDATE: fiddle

jQuery Select All Checkbox with toggleClass

I have seen other examples of this but have not successfully gotten this to function correctly. The examples I have seen also are just using regular checkboxes. I have used a class to stylize the checkbox with a sprite sheet so having a bit of trouble taking the ideas of these other examples and applying them to my case.
Here is the mark up:
<div id="showHideAll"">Show/Hide All<input type="checkbox" id="allCheck" name="pinSet" class="pinToggles" onclick="checkAllLinks()">
<label for="allCheck" class="css-label"></label></div>
</div>
<div>Opt1<input type="checkbox" id="opt1Check" name="pinSet" class="pinToggles" onclick="checkOpt1Links()">
<label for="opt1Check" class="css-label"></label>
</div>
<div>Opt2<input type="checkbox" id="opt2Check" name="pinSet" class="pinToggles" onclick="checkOpt2Links()">
<label for="opt2Check" class="css-label"></label>
</div>
<div>Opt3<input type="checkbox" id="opt3Check" name="pinSet" class="pinToggles" onclick="checkOpt3Links()">
<label for="dinShopCheck" class="css-label"></label>
</div>
The checked property is what changes the sprite using a css class.
input[type=checkbox].pinToggles:checked + label.css-label {
background-position: 0 -16px;
}
Most of this is for other functionality but thought I would show it just in case.
This is how I set up the individual checkboxes:
function checkOpt1Links(){
$('#opt1 li a').toggleClass("inactive");
if(opt1.getVisible() == true)
{
opt1.setOptions({visible:false});
}
else
{
opt1.setOptions({visible:true});
}
}
What I am looking for is the typical select all checkbox functionality, where if you check it the boxes all check, if you uncheck they all uncheck but also if you click a box when select all is checked the select all and the clicked checkbox uncheck and vice versa. I did look at this example: Jquery "select all" checkbox but just having difficult time making it work. Thanks for the help!

1) Use change event handler instead of click for checkbox and radio buttons.
You can make it simple like this
$('#showHideAll').on('change', 'input[type=checkbox]', function () {
if ($('.pinToggles').is(':checked')) {
$('.pinToggles').prop('checked', false)
}
else {
$('.pinToggles').prop('checked', true)
}
});
2) I have removed the class and onclick event handler in the below checkbox only.
HTML:
<div id="showHideAll">Show/Hide All<input type="checkbox" id="allCheck" name="pinSet" >
<label for="allCheck" class="css-label"></label></div>
</div>
Check this JSFiddle

Display and Hide a Div using check box

My requirement is like, If i am choosing single factor i can able to choose only one type of authentication mode. If any one of the authentication mode is chosen the corresponding div will be showed, In multiple factor I can able to select two authentication mode but if I am selecting two authentication modes only the first checked div get's displayed but the second checked div doesn't get's displayed. How to display both the div's when selecting 2 options.
I tried this:
if ($('#chkOTP').is(':checked')) {
$('#OTPMain').show();
} else if ($('#chkVoicePrint').is(':checked')) {
$('#VoicePrintEmailCampMain').show();
} else if ($('#chkPersonInfo').is(':checked')) {
$('#RandomAuthMain').show();
} else if ($('#chkPastHis').is(':checked')) {
$('#PastHistoryMain').show();
} else if ($('#chkSQ').is(':checked')) {
$('#SqQuestionMain').show();
}
Thanks in Advance.

Use this .. If you use else if only one statement is executed so you should go for if for each and every checkbox
if ($('#chkOTP').is(':checked')) {
$('#OTPMain').show();
}
if ($('#chkVoicePrint').is(':checked')) {
$('#VoicePrintEmailCampMain').show();
}
if ($('#chkPersonInfo').is(':checked')) {
$('#RandomAuthMain').show();
}
if ($('#chkPastHis').is(':checked')) {
$('#PastHistoryMain').show();
}
if ($('#chkSQ').is(':checked')) {
$('#SqQuestionMain').show();
}

Using a little bit of forethought can save you a fair bit of code. putting a class on your divs that matches the value of the checkbox you can just do an on click in jQuery like this:
<input type="checkbox" name="vehicle" value="first">First<br />
<input type="checkbox" name="vehicle" value="second">Second<br />
<input type="checkbox" name="vehicle" value="third">Third<br />
<input type="checkbox" name="vehicle" value="fourth">Fourth<br />
<div class="first">First</div>
<div class="second">second</div>
<div class="third">third</div>
<div class="fourth">fourth</div>
$('input:checkbox').on('click',function(){
if($(this).is(':checked'))
{
$('.'+$(this).val()).show();
} else {
$('.'+$(this).val()).hide();
}
});
Demo: http://jsfiddle.net/calder12/jRZBX/1/

Checkbox toggle behavior is reverse of what is expected?

At this site there is a 'Cholera facilities"checkbox for triggering the display of a map layer.
The problem is how the checkbox behaves. It is reverse what I expect-- it triggers upon being unchecked, rather than checked?
<div><input type="checkbox" id="cholera_control" name="cholera_control" />
<label for="cholera_control">Cholera Facilities</label></div>

Just reverse the if with the else.
Instead of:
if (showCholera) {
kmlLayerCTF.setMap(null);
} else {
kmlLayerCTF.setMap(map);
}
do:
if (showCholera) {
kmlLayerCTF.setMap(map);
} else {
kmlLayerCTF.setMap(null);
}
This is happening because your initial value is false.
var showCholera = false;
...then you're reversing it before the if() statement:
showCholera = !showCholera;
...so when the if() runs, showCholera is true, and the if is executed instead of the else.

Change
<input type="checkbox" id="cholera_control" name="cholera_control" />
<input type="checkbox" name="mc-cb" id="mc-cb">
to:
<input type="checkbox" check="checked" id="cholera_control" name="cholera_control" />
<input checked="checked" type="checkbox" name="mc-cb" id="mc-cb">