JQuery - show second checkbox when ticking first - javascript

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>

Related

Show multiple div after click button only if checkbox are checked

I'd like to show one or two div after click a submit button, but only if first and/or second checkbox are checked. I have this code:
var first = true;
$('input[type="checkbox"][name^=chk]').change(function() {
var $target = $('#sb' + this.id.replace('chk', '')).toggle(this.checked);
if (first) {
$('div[id^=sb]').not($target).hide();
first = false;
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="chk1" type="checkbox" id="chk1" value="">chekme1
<input name="chk2" type="checkbox" id="chk2" value="">checkme2
<div id="sb1" style="display: none;">Checkbox content one</div>
<div id="sb2" style="display: none;">Checkbox content two</div>
I'm not expert on JavaScript.
Is there a way to add a submit button to show the first or/and second div after click on button?
I guess the easiest way would be to implement onClick() event over the button with function that checks if checkbox is checked.
function showDiv(){
if(document.getElementById('chk1').checked){
$div1.show()
} else {
$div1.hide()
}
if(document.getElementById('chk2').checked){
$div2.show()
} else {
$div2.hide()
}
}
here you have working example: https://jsfiddle.net/j30reczv/24/

jQuery toggle won't work for checkbox, div remains display:block

I have an input checkbox field and when the checkbox changes (user clicks or unclicks) the div below should toggle. In my style sheet I have the div paypalInputArea as display:none and when the checkbox in clicked, it should toggle, however I can't seem to get it to work. Can anyone see what is wrong with my code?
Here is my html:
<div class="checkbox-row" id="paypalCheckbox">
<input type="checkbox" maxlength="2147483647" value="true" name="paypalPaymentCheckbox" id="paypalPaymentCheckbox" class="checkinput styled" />
<label class="paymentMethodTitle"></label>
</div>
<div class="paypalInputArea">
<isinclude template="includes/paymentmethodsinclude" />
</div>
And here is my jQuery:
$("#paypalCheckbox.checkbox-row .areaExpander").on('change', function() {
$(".paypalInputArea").toggle();
if ($('.paypalInputArea').is(':visible')) {
app.paymentAndReview.setCOContinueBtn(true);
$("#paypalPaymentCheckbox").attr('checked','true');
$('#paypalCheckbox.checkbox-row .areaExpander').addClass('open');
} else {
$("#paypalPaymentCheckbox").removeAttr('checked');
$('#paypalCheckbox.checkbox-row .areaExpander').removeClass('open');
app.paymentAndReview.setCOContinueBtn(false);
}
});
$("#paypalCheckbox.checkbox-row input").attr('checked') && app.paymentAndReview.setCOContinueBtn(true);
$("#paypalCheckbox").on('change', function() {
$(".paypalInputArea").toggle();
if ($('.paypalInputArea').is(':visible')) {
//app.paymentAndReview.setCOContinueBtn(true);
$('#paypalCheckbox.checkbox-row .areaExpander').addClass('open');
} else {
$('#paypalCheckbox.checkbox-row .areaExpander').removeClass('open');
//app.paymentAndReview.setCOContinueBtn(false);
}
});
$("#paypalCheckbox.checkbox-row input").attr('checked') && app.paymentAndReview.setCOContinueBtn(true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-row" id="paypalCheckbox">
<input type="checkbox" maxlength="2147483647" value="true" name="paypalPaymentCheckbox" id="paypalPaymentCheckbox" class="checkinput styled" />
<label class="paymentMethodTitle"></label>
</div>
<div class="paypalInputArea" style="display:none">
blabla
</div>
just replace the line:
$("#paypalCheckbox.checkbox-row .areaExpander").on('change', function() {
with:
$("#paypalCheckbox").on('change', function() {
As you have an ID (which has to be unique) you dont have to use other classes or else to reach it!
you can also remove those lines as the attrribute checked is set as the user clicks on the checkbox
$("#paypalPaymentCheckbox").attr('checked','true');
$("#paypalPaymentCheckbox").removeAttr('checked');
Hope this helps!
It looks like you're missing the class areaExpander from your checkbox

hide a checkbox in function another and disabled all elements to the checkbox disabled

<script type="text/javascript">
function CheckBox(checkerbox, div) {
if (checkerbox.checked) {
document.getElementById(div, Urbanoo).style.display = "block"
} else {
document.getElementById(div, Rurall).style.display = "none"
$("#Rurall").find("*").prop("disabled", true);
}
}
function CheckBox1(checkerbox1, div) {
if (checkerbox1.checked) {
document.getElementById(div, Rurall).style.display = "block"
} else {
document.getElementById(div, Urbanoo).style.display = "none"
$("#Urbanoo").find("*").prop("disabled", true);
}
}
</script>
How to hide a checkbox in function another and disabled all elements to the checkbox disabled?
<input name="Rural" type="checkbox" onclick="CheckBox1(this,'Rurall');" />
<input name="Urbano" type="checkbox" onclick="CheckBox(this,'Urbanoo');" /> Urbanoo </center>
<div id="Urbanoo" style="display:none" >
<g:render template="../DomUrbano/form"/>
</div>
The problem is that when I turn on a check box not the other box is not disabled
<div id="Rurall" style="display:none">
</br>
<g:render template="../DomRural/form"/>
</div>
I think I see what you are attempting but frankly it's less than super clear.
SO what I think you want is;
Hide other checkboxes if I check one
If I do uncheck a box, show the other one again
Show a "partner" area if I check a box
Disable other NOT partner area inputs if I check a box
I modified your markup some to make it easier and also added some additional to clearly show what is happening. I also added a data element for the partner to the input so we can make this all simpler and only have one function; now called via an event handler and NOT with inline code in markup.
Revised markup:
<span class="myinputs"><input class="mycheck" name="Rural" type="checkbox" data-partner="#Rurall" /> Rurall</span>
<span class="myinputs"><input class="mycheck" name="Urbano" type="checkbox" data-partner="#Urbanoo" /> Urbanoo</span>
<div id="Urbanoo" class="hidden others">the Urbannoo
<g:render template="../DomUrbano/form" />
<input type="textbox"/>
</div>
<div id="Rurall" class="hidden others">the Rurall
<g:render template="../DomRural/form" />
<input type="textbox"/>
</div>
Code:
$('.mycheck').on('change', function() {
var amIChecked = $(this)[0].checked;
$(this).parent().siblings('.myinputs').toggle(!amIChecked);
var pt = $(this).data('partner');// get the partner selector
$(pt).toggle(amIChecked);// show the partner in the others list
//do the enable in the partner
$('.others').filter(pt).toggle(amIChecked).find("*").prop("disabled", !amIChecked);
//do the disable in the othes list not the partner
$('.others').not(pt).find("*").prop("disabled", amIChecked);
});
Play with it all here: https://jsfiddle.net/MarkSchultheiss/cLyb103x/1/

foreach radio button show more info

I am trying to make for each radio button, when it is clicked on to show the div with more infos about that clicked title, when another radio button is clicked then the to show info about that radio button and hide the other one that was clicked on:
HTML:
<input type="radio" id="1" />
<div class="event1">
content..
</div>
<input type="radio" id="2" />
<div class="event2">
content..
</div>
<input type="radio" id="3" />
<div class="event3">
content..
</div>
jQuery:
var i = 1;
while(i < 10) {
$('.event' + i).hide();
$("#" + i).click(function() {
$('.event' + i).show();
});
i++;
}
HTML
<input type="radio" name="radio" id="1" />
<div class="event">
content.. 1
</div>
<input type="radio" name="radio" id="2" />
<div class="event">
content.. 2
</div>
<input type="radio" name="radio" id="3" />
<div class="event">
content.. 3
</div>
JS
$('input[name=radio]').click(function() {
$('.event').hide();
$(this).next('.event').show();
});
CSS
.event {
display: none;
}
Fiddle
http://jsfiddle.net/UKn6D/
You can try changing your loop with "each"
$(function(){
$("input[type='radio']").each(function(){
$(this).change(function(){
if ($(this).is(':checked'))
$(this).next().show();
else
$(this).next().hide();
});
});
});
It would be preferrable if you assign a class to radio elements to focus specifically on them. Something like "radioElements" should be enough. Or you can also use id with a starter: "radio_1","radio_2" and then use the input[id^='radio_'].
In all the case you can use "each" function.
More deeply, if you want that all other radio "info" cut off change it to:
$(function(){
$("input[type='radio']").each(function(){
$(this).change(function(){
if ($(this).is(':checked')) {
$("input[type='radio']").next().hide();
$(this).next().show();
}
});
});
});
$('input[type="radio"]').on('change', function() {
var id = $(this).attr('id'); //Get the ID from the selected radio button
$('div:visible').hide(); //Hide visible Divs
$('div.event' + id).show(); //Show matched Div
});
You'll want to give the divs an additional class name and update the jQuery code here. You'll also want to make sure to assign a name attribute to the input elements so that they are all part of the same group -- assuming they are.
instead of having a while look like that why not simply have
<div id="input-container">
<input class="clickable" />
<div class="content"></div>
</div>
This will then work with multiple and the jQuery can just be like this
$('#input-container input.clickable').click(function() {
$(this).parent().find('div.content').hide();
$(this).next('div.content').show();
});
I haven't actually tested the above but I believe it should work for you & the reason to have the container ID is just to speed your jQuery up as it is faster to attach via #elementID first

Show/hide div based on checkbox value

When the user checks 'student'(check-1). The 2 checkbox values are supposed to disappear and reveal a text input div. As of right now I've got the input-reveal down. But I can't seem to get the checkboxes to disappear.
I've tried:
$(function () {
$('#check-1').change(function () {
$('.name').toggle(this.checked);
$('#check-1').hide();
$('#check-2').hide();
}).change();
});
But that doesn't work. How do I hide the checkboxes once 'student' is checked? Any idea's?
Here is a small fiddle . Thanks for your help in advance.
See the code below:
$(".my-check").change(function() {
if ( $(this).is(':checked') ) {
$(".my-box").show();
} else {
$(".my-box").hide();
}
});
More details in:
http://jsfiddle.net/marloscarmo/vMFQd/
wrap your textboxes with a div, say "thisWrapper"
<div id="thisWrapper">
<input type="checkbox" id="check-1" class="checkchoice staff" required><label for="check-1" class="choice staff">Staff</label>
<input type="checkbox" id="check-2" class="checkchoice student" required><label for="check-2" class="choice student">Student</label>
</div>
and in the change event you posted add:
$("thisWrapper").hide();
that should hide both checkboxes at once. Of course you'll have to add a "cancel" or "Reset" button to show the checkboxes again.
or you could give the checkboxes both a new class name like "mycheckboxes" and call this:
$(".mycheckboxes").click(function() {
$('#check-1').hide();
$("#check-2").hide();
});
* HERE"S THE FULL EXAMPLE I GOT WORKING IN FIDDLER **
Try this instead:
<div id="thisWrapper">
<input type="checkbox" id="check-1" class="checkchoice" required><label for="check-1" class="choice staff">Staff</label>
<input type="checkbox" id="check-2" class="checkchoice" required><label for="check-2" class="choice student">Student</label>
</div>
<div id="nameinput">
<input type="text" placeholder="So what's your name?" />
</div>
<script>
$(function() {
$(".checkchoice").change(function() {
$("#thisWrapper").hide();
$("#nameinput").show();
});
});
</script>

Categories