Solved

toogling checkboxes with javascript

Posted on 2014-11-16
2
107 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
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

815 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now