Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 115
  • Last Modified:

toogling checkboxes with javascript

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
RTSol
Asked:
RTSol
1 Solution
 
leakim971PluritechnicianCommented:
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
 
RTSolAuthor Commented:
Thanks a lot!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now