How to hide a div on unchecking the checkbox - javascript

I have a checkbox ,when the checkbox clicks it will display a div ,if unchecked the div has to hide,I have tried this code but it is not working properly,oncheck it is showing the div but it's not hiding
Code:
<div style="clear:both;" class="tab">
<input type="checkbox" id="schedulecheck" name="schedulecheck" value="red" /> Schedule Campaign
<div id="datediv" class="red boxs" style="display: none">
<!--<label>You can schedule campaigns only after 3 hours from now.</label></br>-->
<label>Select date & time to schedule</label></br>
<input type="text" id="scheduledatetime" name="scheduledatetime"/><label id="schedule_error" class="error"> </label>
<!--<input type="text" id="datepickerad"/>-->
</div>
</div>
And the JS code:
$('#schedulecheck').on('ifChecked', function(event){
// alert();
if($(this).attr("value")=="red"){
$(".red").show();
}
});
$('#schedulecheck').on('unChecked', function(event){
if($(this).attr("value")=="red"){
$(".red").hide();
}
});

$('#schedulecheck').click(function () {
$(".red").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="clear:both;" class="tab">
<input type="checkbox" id="schedulecheck" name="schedulecheck" value="red" />Schedule Campaign
<div id="datediv" class="red boxs" style="display:none" >
<!--<label>You can schedule campaigns only after 3 hours from now.</label></br>-->
<label>Select date & time to schedule</label>
</br>
<input type="text" id="scheduledatetime" name="scheduledatetime" />
<label id="schedule_error" class="error"></label>
<!--<input type="text" id="datepickerad"/>-->
</div>

You can rather use .change() function for listening change event. and use .toggle(flag) with flag being true/false based on checked value for making show/hide decision:
$('#schedulecheck').change(function(){
$(".red").toggle(this.checked);
});
Working Demo

Ty this code
$('#schedulecheck').on('click',function () {
if($(this).is(':checked'))
$(".red").show();
else
$(".red").hide();
});

Use this:
$("#schedulecheck").on("click", function () {
$(".red").toggle($(this).is(":checked"));
});
This is "the cross-browser-compatible way to determine if a checkbox is checked" as jQuery recomands it (see http://api.jquery.com/prop/#prop1 for more details).

Related

when check a checkbox, checked other checkbox with same value with javascript

I have two forms with radio type inputs, I would like that when we check an input in the 1st form another input is automatically checked in the second.
Here is the code of the 1st form:
<div class="color-box cta-box">
<label>Colors</label>
<div class="vpc-single-option-wrap">
<input id="cta-couleur_noir-color-selector" type="radio" name="couleur-color-selector" data-field="couleur-field" checked="" data-qtip="no">
<label for="cta-couleur_Noir-color-selector" class="vpc-custom-color custom" data-selector="couleur-field" data-color="Noir" data-name="Noir" data-oriontip="Noir" style="background-color:#000000"></label>
</div>
<div class="vpc-single-option-wrap">
<input id="cta-couleur_bleu-color-selector" type="radio" name="couleur-color-selector" data-field="couleur-field" data-qtip="no">
<label for="cta-couleur_Bleu-color-selector" class="vpc-custom-color custom" data-selector="couleur-field" data-color="Bleu" data-name="Bleu" data-oriontip="Bleu" style="background-color:#0419bd"></label>
</div>
</div>
And here is the code of the 2nd form:
<div class="color-box cta-box">
<label>Colors</label>
<div class="vpc-single-option-wrap">
<input id="cta-texte-en-tete-centre_noir-color-selector" type="radio" name="texte-en-tete-centre-color-selector" data-field="texte-en-tete-centre-field" checked="" data-qtip="no">
<label for="cta-texte-en-tete-centre_Noir-color-selector" class="vpc-custom-color custom" data-selector="texte-en-tete-centre-field" data-color="Noir" data-name="Noir" data-oriontip="Noir" style="background-color:#000000"></label>
</div>
<div class="vpc-single-option-wrap">
<input id="cta-texte-en-tete-centre_bleu-color-selector" type="radio" name="texte-en-tete-centre-color-selector" data-field="texte-en-tete-centre-field" data-qtip="no">
<label for="cta-texte-en-tete-centre_Bleu-color-selector" class="vpc-custom-color custom" data-selector="texte-en-tete-centre-field" data-color="Bleu" data-name="Bleu" data-oriontip="Bleu" style="background-color:#0419bd"></label>
</div>
</div>
So I would like that when I check the input with the ID cta-couleur_noir-color-selector in the 1st form, the input with the ID cta-texte-en-tete-centre_noir-color-selector "is automatically checked in the second form and the same for the id" cta-couleur_bleu-color-selector "which would correspond to the ID" cta-texte-en-tete-center_bleu-color-selector .
I tried with this script but it doesn't work:
<script type="text/javascript">
jQuery('input[type=radio][name=couleur-color-selector]').on('change', function () {
if ( jQuery(this).attr('id') == 'cta-couleur_bleu-color-selector'.checked) {
jQuery('#cta-texte-en-tete-centre_bleu-color-selector').prop(checked, true);
}else
{
jQuery('#cta-texte-en-tete-centre_noir-color-selector').prop('checked', true);
}
});
</script>
Could someone help me?
You must set unique value for each radio box in 1st form.
and check when radio click => get value and check to same unique value in 2nd form.
example:
$(document).on('click', '[type="radio"]', function () {
let value = $(this).val();
$('[value="'+value+'"]').prop('checked', true);
});

How to make radio input selected not the multiple

I have some radio inputs. Please see the code
<div class="radio">
<label class="btn btn-time text-center "> 9.30 PM
<input type="radio" name="optionsRadios"id="optionsRadios20"value="9.30PM" />
</label>
</div>
There are many input like this. I want to add selected color when a user clicks on one input. For this I am using this jQuery code
$(document).ready(function() {
$(".btn-time").click(function(){
$(this).css("background", "#DF73AF");
});
});
This code solve the problem but the problem is, it gives all the clicked input same color. I want only the last clicked input the color and other should return to default .
Thanks in advance..
Try this
$(document).ready(function() {
$(".btn-time").click(function(){
$(".btn-time").css('background', 'yourColor');
$(this).css("background", "#DF73AF");
});
});
This is a working example
$(document).ready(function() {
$(".btn-time").click(function(){
$(".btn-time").css('background', '#FFF');
$(this).css("background", "#DF73AF");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label class="btn btn-time text-center "> 9.30 PM
<input type="radio" name="optionsRadios"id="optionsRadios20"value="9.30PM" />
</label>
<label class="btn btn-time text-center "> 10.30 PM
<input type="radio" name="optionsRadios"id="optionsRadios20"value="10.30PM" />
</label>
<label class="btn btn-time text-center "> 11.30 PM
<input type="radio" name="optionsRadios"id="optionsRadios20"value="11.30PM" />
</label>
<label class="btn btn-time text-center "> 12.30 PM
<input type="radio" name="optionsRadios"id="optionsRadios20"value="12.30PM" />
</label>
</div>
Just reset everything before you set the click color:
$(document).ready(function() {
$(".btn-time").click(function(){
$(".btn-time").css('background', '#fff'); // or whatever default color
$(this).css("background", "#DF73AF");
});
});
Add a code to change bacground to default before updating current. I'd suggest you to cache the set of elements in a variable (myset in my example for significant performance benefits).
$(document).ready(function() {
var myset = $(".btn-time");
myset.click(function() {
myset.css("background", "default_color");
$(this).css("background", "#DF73AF");
});
});
For the inherit term you can, of course, put any color. The new line resets the background color for every object the class is applied to.
$(document).ready(function() {
$(".btn-time").click(function() {
$(".btn-time").css('background', 'inherit');
$(this).css("background", "#DF73AF");
});
});
Here's a JSFiddle for the solution.

check/uncheck bootstrap checkboxes with jQuery

I've made another post yesterday and had no success with it. I will try now to reorder de idea and to ask again since I can't find the solution for this (I'm a newbie and I'm trying really hard).
The thing is that I'm working with this template based on Bootstrap, and this is the code that I can see directly from one of the files and that I'm using on my project:
html snippet:
<div class="hide" id="states">
<div class="control-group">
<label class="control-label">Seleccione</label>
<div class="controls">
<label class="checkbox span4">
<input type="checkbox" value="all" id="allstates" name="all"/>Todas
</label>
<label class="checkbox span4">
<input class="states" type="checkbox" value="Caba" id="" name="st[]"/>Ciudad Autónoma de Buenos Aires
</label>
<label class="checkbox span4">
<input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]"/> Buenos Aires
</label>
<label class="checkbox span4">
<input class="states" type="checkbox" value="Catamarca" id="" name="st[]"/> Catamarca
</label>
</div>
</div>
</div>
After lot of searching I have founded when inspecting it that my code looks like this (snippet):
<div class="controls">
<label class="checkbox span4">
<div class="checker" id="uniform-allstates">
<span>
<input type="checkbox" value="all" id="allstates" name="all">
</span>
</div>Todas
</label>
<label class="checkbox span4">
<div class="checker">
<span>
<input class="states" type="checkbox" value="Caba" id="" name="st[]">
</span>
</div> Ciudad Autónoma de Buenos Aires
</label>
<label class="checkbox span4">
<div class="checker">
<span>
<input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]">
</span>
</div> Buenos Aires
</label>
<label class="checkbox span4">
<div class="checker">
<span>
<input class="states" type="checkbox" value="Catamarca" id="" name="st[]">
</span>
</div> Catamarca
</label>
</div>
As you can see, another div and another span are added (seriously don't know why or how) so I'm guessing now it's some DOM problem the one I'm having.
This is snippet of my js file:
$('#allstates').click(function() {
$('.checkbox').find('span').addClass('checked');
});
So this function selects ALL the checkboxes I have (even though the ones that I don't want because they belong to another category).
I want to know why the div and span are added and how to select only the checkboxes that I want.
For that I've been trying code like this but no success:
test 1
$('#allstates').click(function() {
if ($(this).is(':checked')) {
$('span input').attr('checked', true);
} else {
$('span input').attr('checked', false);
}
});
test2
$('#allstates').click(function() {
$(".states").prop("checked",$("#allstates").prop("checked"))
});
and so other ones that I erased.
NOTE: No js errors are being displayed when inspecting
Also it is important to add prop to true on selecting checkboxes:
$("#checkAll").click(function(){
var check = $(this).prop('checked');
if(check == true) {
$('.checker').find('span').addClass('checked');
$('.checkbox').prop('checked', true);
} else {
$('.checker').find('span').removeClass('checked');
$('.checkbox').prop('checked', false);
}
});
Since I mentioned that this function checked all the checkboxes I had (even though the ones that were not supposed to be checked), I've been trying to look for the solution:
$('#allstates').click(function() {
$('.checkbox').find('span').addClass('checked');
});
But this is not what I wanted. I mentioned also that I noticed that the code was "different" when inspecting it (in Chrome with F12). So as #thecbuilder said, it changes in order to add style.
I realized that since code is changing... I had to change the class (checkbox) from which I was starting the "span tag" search, so I change class checkbox to id states and this is the result:
$('#allstates').click(function() {
if($(this).attr("checked")){
$('#states').find('span').addClass('checked');
}else{
$('#states').find('span').removeClass('checked');
}
});
Now it finally works.
I think you are looking for code like:
$(document).ready(function()
{
$("#allstates").on("change", function()
{
var checked = $(this).prop("checked");
$(this).parents(".controls")
.first()
.find("input[type=checkbox]")
.prop("checked", checked);
});
});
JsFiddle Example
When the state of the checkbox with the id allstates changes, get the checkbox value, find the first parent html element with a class called controls and then only update all the checkboxes in that element with the value of checked.
Simple bootstrap checkbox
<label><input type="checkbox" value="">Option 1</label>
When debug in Chrome dev tool, label look like
https://tinker.press/images/bootstrap-checkbox-label-2017-01-17_084755.png
To toogle checkbox state just set true|false on lable.control.checked
label.control.checked = false; //uncheck
label.control.checked = true; //check
Video demo https://youtu.be/3qEMFd9bcd8

add onto checked values in checkbox via jquery

Hi Im trying to add onto a checkbox's values selected, so maintain the selected values but add other selected values. however the attribute doesn't add selected values. here is my attempt (p.s how would I in turn remove values selected and keep existing values selected?) thanks
$('.add_button').click(function() {
var values = $('input:checkbox:checked.ssremployeeids').map(function () {
return this.value;
}).get();
$('.ssremployeeid').attr('selected',values);
<div class="grs-multi-select-area" style="height:120px;width:150px;">
<div class="grs-multi-select-box ">
<input id="ssrBox" class="ssremployeeid" type="checkbox" name="ssremployeeid[]"
value="1312">
Amanda Becker
</div>
<div class="grs-multi-select-box "> // same as above I just collapsed it for viewing purposes
<div class="grs-multi-select-box ">
<div class="grs-multi-select-box ">
</div> //closes main div
});
I am still not sure if I understood you question correctly, but based one what I understood here's something you could try:
Sample Fiddle: http://jsfiddle.net/HFULf/1/
HTML
<div id="div1">
<input type="checkbox" name="cb1" value="val1" checked="checked" />
<input type="checkbox" name="cb2" value="val2"/>
<input type="checkbox" name="cb3" value="val3"/>
</div>
<div id="div2">
<input type="checkbox" name="cb1" value="val1"/>
<input type="checkbox" name="cb2" value="val2"/>
<input type="checkbox" name="cb3" value="val3"/>
</div>
<button id="btn1">Add Selected</button>
<button id="btn2">Remove Selected</button>
jQuery
//add selected values from first set of check-boxes to the second set
$('#btn1').click(function(e){
$('div#div1 input[type="checkbox"]:checked').each(function(){
$('div#div2 input[type="checkbox"]').eq($(this).index()).prop('checked',true);
});
});
//remove values from second set of check-boxes if selected in first one
$('#btn2').click(function(e){
$('div#div1 input[type="checkbox"]:checked').each(function(){
$('div#div2 input[type="checkbox"]').eq($(this).index()).prop('checked',false);
});
});
Hope, this will help you a little if not solve your problem entirely.

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