/    Sign up×
Community /Pin to ProfileBookmark

Jquery problems with checkbox

Copy linkTweet thisAlerts:
Nov 18.2009

Hi there, when using checkbox I’m getting several problems, the basic is that some events only fire once…
Let’s see those examples:
CASE A

[CODE]
$(‘#rss’).click(function()
{
alert(‘Clicked!’);
if($(‘#ckb’).attr(“checked”))
{
$(‘#desc’).show();
}
else
{
$(‘#desc’).hide();
}
});
[/CODE]

In this case, the alert will be fired as many times as the checkbox is clicked but the $(‘#desc’) only shows and hides once…

CASE B

[CODE]
$(‘#ckb’).toggle(
function()
{
$(‘#desc’).show();
},
function()
{
$(‘#desc’).hide();
}
);
[/CODE]

In this case, the hide / show will only be fired once but there’s something else: the checkbox will never be visually checked so it will stay empty and probably returning no value when sending the form…
Any ideas??

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@PerfidusauthorNov 18.2009 — Have anybody tried?

Is this only happening to me because a contextual condition?

Please, some light!
Copy linkTweet thisAlerts:
@ssystemsNov 18.2009 — Is the page ready? I always a good idea to wrap jquery dependent functions inside the $(document).ready();

[CODE]
$(document).ready(
function(){
$('#ckb').click(
function(){
$(this).is(':checked') ? $('#desc').show() : $('#desc').hide();
}
);
}
);
[/CODE]
Copy linkTweet thisAlerts:
@PerfidusauthorNov 18.2009 — It is inside an onload() callback, so when it is called, the environment should be ready. Has anyone tried to reproduce the situation?
Copy linkTweet thisAlerts:
@ssystemsNov 18.2009 — How did you call the jquery event binding inside the onload event binding? Obviously there's a lot of important details you missed out presenting here. In order to call a jquery event bind inside an event binding after the DOM have been loaded you have to put it in a wrapper like this.

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="scripts/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function bind_checkbox_click(){
$('#ckb').click(
function(){
$(this).is(':checked') ? $('#desc').show() : $('#desc').hide();
}
);
}
</script>
</head>
<body onload="bind_checkbox_click();">
<input id="ckb" type="checkbox">
<div id="desc">
test
</div>
</body>
</html>
[/CODE]

Can you give us a link to your page?
Copy linkTweet thisAlerts:
@PerfidusauthorNov 19.2009 — My page is part of an intranet so I can't show it, the code is really long but the concerned part looks like this:

[CODE]$('#container').load('form.html', function()
{
$('#ckb').toggle(
function()
{
$('#desc').show();
},
function()
{
$('#desc').hide();
}
);
})[/CODE]
So all the context must be already loaded when calling the toggle...

I'm only using the document ready callback for the first part but is worthledd for inside navigation when loading pieces of code, then I use the load callback.
Copy linkTweet thisAlerts:
@ssystemsNov 19.2009 — Test html
[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="scripts/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(
function (){
$(".test").click(
function (){
$("#container").load(
"test.html", bind_checkbox_click
);
}
);
}
);

function bind_checkbox_click(){
$('#ckb').click(
function(){
$(this).is(':checked') ? $('#desc').show() : $('#desc').hide();
}
);
}

</script>
</head>
<body>
<span class="test">test</span>
<div id="container">

</div>
</body>
</html>
[/CODE]

Test2.html
[CODE]
<html>
<body>
<input id="ckb" type="checkbox" />
<div id="desc">
test test test
</div>
</body>
</html>
[/CODE]

The code above works flawlessly.
Copy linkTweet thisAlerts:
@PerfidusauthorNov 20.2009 — This really works like a charm to me, but, can somebody tell me why my solution didn't worked out? In fact it worked once and it looks to me well formed and sintactically correct, so... What's wrong?
×

Success!

Help @Perfidus spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...