Simple Toggle checkbox function on IMAGE click
 

I have a checkbox with an ID of svc_tp_1, and an image that
corresponds with this checkbox below it.
<input type="checkbox" name="checkbox" id="svc_tp_1" value="svc_tp_1" /
>
<img src="images/screen_print.jpg" onclick="toggle('svc_tp_1'); return
true;" />

I know how to get the checkbox to check when the image is clicked, but
what I really want is a toggle. When a user clicks on the image, the
system should first check to see if svc_tp_1 is checked or NOT
checked. If it is not checked, then I'd like for it to be checked.

If it is already checked, then I want the checkbox to go away. Simple
enough? PHP and Javascript are so different that something so simple
like this can waste a lot of my time.


function toggle(me) {

if (me == checked) {
me.checked = checked;

} else {
me.checked = unchecked;
}

}

Re: Simple Toggle checkbox function on IMAGE click
 

On Jul 22, 2:12 am, ameshkin <amir.mesh...@gmail.com> wrote:
> I have a checkbox with an ID of svc_tp_1, and an image that
> corresponds with this checkbox below it.
> <input type="checkbox" name="checkbox" id="svc_tp_1" value="svc_tp_1" /
>
> <img src="images/screen_print.jpg" onclick="toggle('svc_tp_1'); return
> true;" />
>
> I know how to get the checkbox to check when the image is clicked, but
> what I really want is a toggle. When a user clicks on the image, the
> system should first check to see if svc_tp_1 is checked or NOT
> checked. If it is not checked, then I'd like for it to be checked.
>
> If it is already checked, then I want the checkbox to go away. Simple
> enough? PHP and Javascript are so different that something so simple
> like this can waste a lot of my time.
>
> function toggle(me) {
>
> if (me == checked) {
> me.checked = checked;
>
> } else {
>
> me.checked = unchecked;
>
> }
> }

Hi,
recently I have done some thing that you want to implement, but its
not the exactly the same code that you want. But i think this can
solve your problem of toggle.

<script language="javascript" type="text/javascript">
var flag=false;
function Add(chkid)
{

if(flag==false)
{
document.getElementById(chkid).checked=true;
flag=true;
}
else
{
document.getElementById(chkid).checked=false;
flag=false;
}

}
</script>

Yo can call this function on Image click.

Re: Simple Toggle checkbox function on IMAGE click
 

ameshkin escribió:
> I have a checkbox with an ID of svc_tp_1, and an image that
> corresponds with this checkbox below it.
> <input type="checkbox" name="checkbox" id="svc_tp_1" value="svc_tp_1" /
> <img src="images/screen_print.jpg" onclick="toggle('svc_tp_1'); return
> true;" />

function toggle(ckeckbox_id){
var checkbox = document.getElementById(ckeckbox_id);
checkbox.checked = !checkbox.checked;
}

Or you can simply surround your picture in a <label> tag:

<input type="checkbox" name="checkbox" id="svc_tp_1" value="svc_tp_1" />
<label for="svc_tp_1"><img src="images/screen_print.jpg" /></label>


--
-- http://alvaro.es - Álvaro G. Vicario - Burgos, Spain
-- Mi sitio sobre programación web: http://bits.demogracia.com
-- Mi web de humor al baño María: http://www.demogracia.com
--

Re: Simple Toggle checkbox function on IMAGE click
 

In comp.lang.javascript message <ededf0a9-fa5c-4078-a91e-527ba22ed85a@p2
5g2000pri.googlegroups.com>, Mon, 21 Jul 2008 14:12:41, ameshkin
<amir.meshkin@gmail.com> posted:
>
>If it is already checked, then I want the checkbox to go away. Simple
>enough?

No. Evidently you want it to be unchecked, not to vanish. Try to write
clear and exact English, even if you are American.

Consider the implications of

<input type=checkbox ID=X>
<input type=button onClick="document.getElementById('X').checked ^= 1">

--
(c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Proper <= 4-line sig. separator as above, a line exactly "-- " (SonOfRFC1036)
Do not Mail News to me. Before a reply, quote with ">" or "> " (SonOfRFC1036)

Re: Simple Toggle checkbox function on IMAGE click
 

In comp.lang.javascript message <17ff2a9f-cae4-419a-84bb-060d79912402@k3
0g2000hse.googlegroups.com>, Mon, 21 Jul 2008 23:42:19, smartwebcoder
<smartwebcoder@gmail.com> posted:
>
><script language="javascript" type="text/javascript">
^^^^^^^^^^^^^^^^^^^^^ <- superfluous and deprecated

> var flag=false;
> function Add(chkid)
> {
>
> if(flag==false)
> {
> document.getElementById(chkid).checked=true;
> flag=true;
> }
> else
> {
> document.getElementById(chkid).checked=false;
> flag=false;
> }
>
> }
> </script>
>


You are posting with a false identity : no-one smart would consider that
code to be worth posting. Remember - the inadequate boast of their
prowess, the competent just display it.

There is no need to use == false since JavaScript has a NOT
operator, '!'; and if you don't like that you can reverse the then and
else parts.

But there is no need to use the if at all;

{ document.getElementById(chkid).checked = flag = ! flag }

should be equivalent to the body of your function Add .

Firefox 3.0.1 is out.

--
(c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
Proper <= 4-line sig. separator as above, a line exactly "-- " (SonOfRFC1036)
Do not Mail News to me. Before a reply, quote with ">" or "> " (SonOfRFC1036)