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();
}
}
});
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 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")
I want to popup a jQuery dialog when a html checkbox is checked. I'm using following code. But it's not working.
$(document).ready(function () {
$('#chkBoxHelp').click(function () {
if ($(this).is(':checked')) {
$("#txtAge").dialog();
}
});
});
And the html is as below:
<input type="checkbox" id="chkBoxHelp"/>
<div id="txtAge" style="display: none;">Age is something</div>
Please help me.
Also I want to uncheck the checkBox when popup will be closed. Checkbox is in a jQuery popup box. I need to open another popup on checkbox checked.
Thanks in Advance.
You can use open and close methods and close event.
Code:
$(document).ready(function () {
$('#chkBoxHelp').click(function () {
if ($(this).is(':checked')) {
$("#txtAge").dialog({
close: function () {
$('#chkBoxHelp').prop('checked', false);
}
});
} else {
$("#txtAge").dialog('close');
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/V9zMx/
Try this, also closing if the checkbox is clicked again.
$(document).ready(function () {
var the_checkbox = $('#chkBoxHelp');
the_checkbox.click(function () {
if ($(this).is(':checked')) {
$("#txtAge").dialog({
close: function () {
the_checkbox.prop('checked', false);
}
});
} else {
$("#txtAge").dialog('close');
}
});
});
Demo here
I have below code:
<a href="#" id="#item.Id" name="vote" ><img src="/Content/images/021.png" style="float:left" alt="" /></a>
which invokes an ajax call. on the first call. if the return is true, on the second call I want to make an alert box saying you can do vote only once.
<script type="text/javascript">
$(function () {
$("div.slidera_button a").click(function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
this works, if i click on the button then refresh the page but it doesnt work, if i try to click twice.
I want to the user to be able to click multiple times and only after first one, they get a popup.
why this is not working?
how can i fix it?
EDIT: works in FF.. doesnt work in IE.
How about something like this:
<style type="text/css">
a.disabled {
opacity: 0.5;
/* whatever other styles you want */
}
</style>
<script type="text/javascript">
$(function () {
$.ajaxSetup({ cache: false });
$("div.slidera_button a").click(function (e) {
var item = $(this);
if (item.hasClass("disabled")) {
// alert when they vote
// you'll need to handle some way to add this
// server side to account for page reload, yes?
alert('You may only vote once');
}
$.get('#Url.Action("VoteAjax", "Home")'
, { id: item.attr("id") }
, function (response) {
// if this returns successfully, you voted.
item.addClass('disabled');
}
});
return false;
})
});
</script>
Use this script
<script type="text/javascript">
$(function () {
$("div.slidera_button a").live('click',function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
Or JQuery Delegate method to trigger this click
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();
}
});
});