Simple Toggle checkbox function on IMAGE click

Discussion in 'Javascript' started by ameshkin, Jul 21, 2008.

  1. ameshkin

    ameshkin Guest

    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;
    }

    }
    ameshkin, Jul 21, 2008
    #1
    1. Advertising

  2. On Jul 22, 2:12 am, ameshkin <> 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.
    smartwebcoder, Jul 22, 2008
    #2
    1. Advertising

  3. 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
    --
    Álvaro G. Vicario, Jul 22, 2008
    #3
  4. In comp.lang.javascript message <ededf0a9-fa5c-4078-a91e-527ba22ed85a@p2
    5g2000pri.googlegroups.com>, Mon, 21 Jul 2008 14:12:41, ameshkin
    <> 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)
    Dr J R Stockton, Jul 22, 2008
    #4
  5. In comp.lang.javascript message <17ff2a9f-cae4-419a-84bb-060d79912402@k3
    0g2000hse.googlegroups.com>, Mon, 21 Jul 2008 23:42:19, smartwebcoder
    <> 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)
    Dr J R Stockton, Jul 22, 2008
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?c2lhag==?=

    Image Toggle

    =?Utf-8?B?c2lhag==?=, May 4, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    482
    Steve C. Orr [MVP, MCSD]
    May 4, 2005
  2. Aung

    checkbox toggle

    Aung, Apr 9, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    4
    Views:
    161
    Ian Oldbury
    Apr 14, 2004
  3. kiran

    Toggle Image - Problem in IE

    kiran, Jun 3, 2004, in forum: Javascript
    Replies:
    4
    Views:
    109
    Grant Wagner
    Jun 4, 2004
  4. Stanimir Stamenkov

    [IE] Toggle checkbox state - onclick vs. onchange

    Stanimir Stamenkov, Apr 4, 2008, in forum: Javascript
    Replies:
    0
    Views:
    156
    Stanimir Stamenkov
    Apr 4, 2008
  5. toggle node with checkbox

    , Oct 12, 2008, in forum: Javascript
    Replies:
    0
    Views:
    92
Loading...

Share This Page