Solved

toogling checkboxes with javascript

Posted on 2014-11-16
2
111 Views
Last Modified: 2014-11-16
Hi,

I have a view with two checkboxes like this:

                    <td style="width: 33%">
                        <input id="ppm" type="checkbox" checked />
                        <label for="ppm"><span></span>ppm</label>
                    </td>
                    <td style="width: 33%">
                        <input id="vol" type="checkbox" />
                        <label for="vol"><span></span>% vol</label>
                    </td>

Open in new window


They are styled using ccs3 like this:
input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:22px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background: url('../img/cbUnChecked.png') left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background: url('../img/cbChecked.png') left top no-repeat;
}

Open in new window


Now - when I check one of them I want to uncheck the other, i.e. I want to toggle their state. My approach was to use this code:
            $("#ppm").change(function () {
                var cb = $("#vol");
                console.log(cb);
                console.log(cb.checked);
                console.log(this.checked);
                if (this.checked) {
                    cb.checked = false;
                }
                else {
                    cb.checked = true;
                }
            });
            $("#vol").change(function () {
                var cb = $("#ppm");
                if (this.checked) {
                    cb.checked = false;
                }
                else {
                    cb.checked = true;
                }
            });

Open in new window


Here is the issue: cb is returned as an object but cb.checked is undefined.

What can I do to fix this - or, is there a better way to toggle the checkboxes?

Best regards
RTSol
0
Comment
Question by:RTSol
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40446159
Use radio button with the same name.
... else...
Test page : http://jsfiddle.net/evcedsLu/1/

            $("#ppm,#vol").change(function () {
                $(this).closest("tr").find(":checkbox").not(this).attr("checked", false);
            });

Open in new window

0
 

Author Closing Comment

by:RTSol
ID: 40446172
Thanks a lot!
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Anchor Bookmark 6 34
Make icons act like add/minus for qtys 6 44
Form submit takes only for one form 23 54
Need help for active menu class depending of the page 4 29
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question