I am new to jQuery.
I am trying to make a switcher using a checkbox. At the moment I have gone this far
$(function() {
$('input.cbx').on('change', function() {
if ($(this).prop("checked", true)) {
$('body').addClass('dark');
} else if ($(this).prop("checked", false)) {
$('.body').addClass('light');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dn" type="checkbox" class="cbx hidden" />
<label for="dn" class="lbl"></label>
As you can see the checkbox stay checked after the first click, I imagine is a noob situation but, can you help me please?
You are actually setting the checked property instead of getting.
$('input.cbx').on('change', function() {
if($(this).prop("checked") == "true")
{
$('body').addClass('dark');
} else if($(this).prop("checked") == "false")
{
$('.body').addClass('light');
}
});
You can use this.checked or $(this).is(":checked") instead of $(this).prop("checked")
$('input.cbx').on('change', function() {
if(this.checked)
$('body').addClass('dark');
else
$('.body').addClass('light');
});
You can also use toggleClass
$('input.cbx').on('change', function() {
$('.body').toggleClass('light');
});
Note: I could not see any element with class body? You probably need to assign class to label. If you want to apply the toggle effect to body then remove dot
Live Demo
HTML
<body class="cbx">
<input id="dn" type="checkbox" class="cbx hidden"/>
<label for="dn" class="lbl">123</label>
</body>
Javascript
$('input.cbx').on('change', function() {
$('body').toggleClass('light');
});
$('input.cbx').on('change', function () {
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
DEMO
You can check if the checkbox is check using $(this).is(":checked")
Related
I'm trying to hide/show input and div based on Input value.
The code below isn't working:
HTML:
<div>
<span class='just-show'>Show This Label</span>
<input class='for-input' type='text' value='*$set-by-sql-data*'>
</div>
JS
$(document).ready(function () {
if ($(".for-input").val()=='') {
$(".just-show").show();
$(".for-input").hide();
} else {
$(".just-show").hide();
$(".for-input").show();
}
return false;
});
How to hide the element without event (ex: click) ? Just on ready function.
You can use
$(document).on('change', 'input', function() {
// Does some stuff and logs the event to the console
});
Or
$("input").change(function(){
// Does some stuff and logs the event to the console
});
Where input is Input identifier like your .for-input
Your desire Jquery code:
$(document).on('change', '.for-input', function() {
if ($(".for-input").val()=='') {
$(".just-show").show();
$(".for-input").hide();
} else {
$(".just-show").hide();
$(".for-input").show();
}
});
Example:
$(document).ready(function () {
if ($(".for-input").val()=='') {
$(".just-show").show();
$(".for-input").hide();
} else {
$(".just-show").hide();
$(".for-input").show();
}
//return false;
$(document).on('change', '.for-input', function() {
if ($(".for-input").val()=='') {
$(".just-show").show();
$(".for-input").hide();
} else {
$(".just-show").hide();
$(".for-input").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
<span class='just-show'>Show This Label</span>
<input class='for-input' type='text' value='*$set-by-sql-data*'>
</div>
You can set the css property to display none.
$('.for-input').css('display', 'none');
I have two <div> like these:
<div class='test' style='visibility: visible;'> div1 </div>
<div class='test'> div2 </div>
Now I want to show me an alert when I click on div1, because it has visibility property. In other word:
$(".test").click(function(e) {
if (this has visibility property){
alert('it has');
}
});
Now I want to know how can I define a condition in the above code using jquery?
Here is my try: (but none of them does not work)
if($(this).css('visibility').length != 0) {}
if($(this).css('visibility') == 'visible') {}
if($(this).hasClass('visibility-set')) {}
So, there is any solution?
Try this.style.visibility as it will return the value of inline-css or empty string '' if specified style does not exist!
$(".test").click(function(e) {
if (this.style.visibility) {
alert('It\'s set!');
} else {
alert('Not set!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='test' style='visibility: visible;'>div1</div>
<div class='test'>div2</div>
For the sake of completeness and because you asked for a jQuery way. Here a solution using the jQuery prop() function.
$(".test").click(function(e) {
if ($(this).prop('style')['visibility']) {
alert('It\'s set!');
} else {
alert('Not set!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='test' style='visibility: visible; display: block;'>div1</div>
<div class='test'>div2</div>
you can try this one:
$('.test').click( function() { alert('It\'s set!'); });
$('.test1').click( function() { alert('not set!'); });
DEMO FIDDLE
MY PROBLEM
jQuery(document).ready(function () {
if ($('input.pokazkontakt').prop(':checked')) {
$(this).parent().nextAll('.pkbox:first').css('display', 'block');
} else {
$(this).parent().nextAll('.pkbox:first').css('display', 'none');
}
$('input.pokazkontakt').click(function () {
$(this).parent().nextAll('.pkbox:first').toggle('fast');
});
});
Demo
2nd part of JS is working (toogle), but i want to check first if checkbox is checked and hide the div or show. Where is a problem?
Try this:
jQuery(document).ready(function () {
$('input.pokazkontakt').each(function(){
if ($(this).is(':checked')) {
$(this).parent().nextAll('.pkbox:first').css('display', 'none');
} else {
$(this).parent().nextAll('.pkbox:first').css('display', 'block');
}
});
$('input.pokazkontakt').click(function () {
$(this).parent().nextAll('.pkbox:first').toggle('fast');
});
});
Use your logic reversely when you set display:none and display:block.
Use .is to check for checked state.
Use .each to iterate all your checkboxes
DEMO
You can use .is()
if($('input.pokazkontakt').is(':checked'))
instead of if($('input.pokazkontakt').prop(':checked'))
Demo
I am having a problem with checkboxes. I have a series of photos in a form. Each photo has a checkbox. If a photo's checkbox is checked, a div associated with the photo is revealed using .show().
That works fine, and I am able to submit the form. However, if I press "back" on the browser to go back to the set of photos, the checkboxes are still checked, but the div associated with it is no longer visible.
What do I need to do in order to make sure the the checked photos still have visible divs even when going "back" to the page?
$(document).ready(function () {
$(':checkbox').change(function() {
var dataID = $(this).attr("id");
if($(this).is(':checked')) {
$("#content"+dataID).show();
}
else {
$("#content"+dataID).hide();
}
});
});
and the form is something like this:
<form>
<input name="box1" id="box1" type="checkbox" />
<input name="box2" id="box2" type="checkbox" />
<input name="box3" id="box3" type="checkbox" />
...
</form>
Try displaying the images for checked divs on page load, i.e. something like:
$(document).ready(function () {
$(':checkbox').change(function() {
// ... your code ...
});
$(':checkbox').each(function() {
var dataID = $(this).attr("id");
if($(this).is(':checked')) {
$("#content"+dataID).show();
}
else {
$("#content"+dataID).hide();
}
});
});
Cleaner Version
$(document).ready(function () {
$(':checkbox').change(function() { checkImage($(this)); });
$(':checkbox').each(function() { checkImage($(this)); });
});
function checkImage(_checkBox) {
var dataID = _checkBox.attr("id");
if(_checkBox.is(':checked')) {
$("#content"+dataID).show();
}
else {
$("#content"+dataID).hide();
}
}
Do something like this:
$(document).ready(function() {
$(':checkbox').change(function() {
ToggleContent($(this));
});
$(':checkbox').each(function() {
ToggleContent($(this));
});
function ToggleContent(chkbox) {
var dataID = chkbox.attr("id");
if (chkbox.is(':checked')) {
$("#content" + dataID).show();
}
else {
$("#content" + dataID).hide();
}
}
});
I have two functions.
The first function translates a div click into a checked/unchecked toggle.
The second function translates a checkbox change into a hide/show event.
The problem is that when I use the first function to check/uncheck the box, the second function is not called. I am new to javascript, thanks.
<script type="text/javascript">
$(document).ready(function() {
$(":checkbox").parent().click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = $(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
evt.stopPropagation();
return false;
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(":checkbox").change(function() {
if($(this).attr("checked")) {
$('.'+this.id).show();
}
else {
$('.'+this.id).hide();
}
});
});
</script>
The change event does not fire when you programmatically change the value of a check box. What you can do to ensure it fires is:
$(":checkbox").parent().click(function(evt) {
if (evt.target.type !== 'checkbox') {
var $checkbox = $(":checkbox", this);
$checkbox.attr('checked', !$checkbox.attr('checked'));
$checkbox.change();
}
});
Don't bother with the first snippet. Just use LABEL elements:
<label><input type="checkbox">Some option</label>
Now, when the user clicks the label (the text next to the checkbox), the checkbox will be activated.
The second snippet can be optimized:
$('input:checkbox').change(function() {
$('#' + this.id).toggle(this.checked);
});
you are using '.' which is for class selectors instead use '#' since you are using the element ID. Like this:
$(document).ready(function() {
$(":checkbox").bind('change', function() {
if($(this).attr("checked")) {
$('#'+this.id).show();
}
else {
$('#'+this.id).hide();
}
});
});