Why won't this Code Work in jQuery/JavaScript for an HTML Form Working with Checkboxes?

Question

Okay, this is kind of blowing my mind because I have used these bits of code separately and very successfully but when I put these together they don't work. I will explain what I am trying to do, although it will probably be pretty self-explanatory when you see the code below.

I am trying to simply make sure that only one of two checkboxes can be checked at a time for an HTML form. (Can't use radio button because the option for neither box to be checked must be available).

Anyway, here is the code (please assume that the ids of the input fields are accurate, they are "sIsGangMember" and "sIsNotGangMember"

$("#sIsGangMember").change(function () {

    if ($("#sIsGangMember").is(':checked')) {
        document.getElementById("sIsNotGangMember").checked = false;
    }
});

$("#sIsNotGangMember").change(function () {

    if ($("#sIsNotGangMember").is(':checked')) {
        document.getElementById("sIsGangMember").checked = false;
    }
});

I am really sorry if this is something stupid, but I know I have used all parts of this code separately before and all works great, but I simply can't see anything wrong with it nor do I see anything wrong with the HTML part:

<tr>
    <td class="lineupColor2">
        Search For Street<br/>Gang Member
    </td>
    <td class="lineupColor2">
        <label for="sIsGangMember">Is Gang Member</label>
        <br/>
        <input type="checkbox" id="sIsGangMember" name="sIsGangMember" 
            style="margin-left: 115px;" value="ticked" @IsGangMemberTicked/>
    </td>
    <td class="lineupColor2"> 
        <label for="sIsNotGangMember">Is Not Gang Member</label>
        <br/>
        <input type="checkbox" id="sIsNotGangMember" name="sIsNotGangMember"
            style="margin-left: 115px;" value="ticked" @IsNotGangMemberTicked/>
    </td>
    <td class="lineupColor2">
         <button type="button" style="cursor: pointer;" 
             onclick="clearIsGangMembers()">Clear Fields
         </button>
    </td>
    <td class="lineupColor2">
    </td>
</tr>

The razor (C#) that you see is simply a value that holds nothing or holds the string "checked='checked'" so that the form remembers the values of whether they are checked or not for further searches or if an error occurs and the form is not submitted, etc.

The part that assigns the C# variables are:

    //////////////////////////////////////////////////////////////////////////////////////////
    if(IsGangMember=="ticked"){IsGangMemberTicked="checked='checked'";}///////////////////////
    if(IsNotGangMember=="ticked"){IsNotGangMemberTicked="checked='checked'";}/////////////////
    //////////////////////////////////////////////////////////////////////////////////////////

Anyway, thanks for any help!

Thanks for all the help everyone, but can anyone tell me "why" this won't work?

UPDATE:

Okay, .click doesn't work either... clearly there is something else going on here...

seems to work stand-alone (http://jsfiddle.net/3RCDm/) perhaps something else is tripping it up. are you getting any js errors? — Veli Gebrev, Oct 03 '12 at 15:20
No, no js errors, and by "won't work" i mean just nothing happens (checkbox in other checkbox doesn't go away). — VoidKing, Oct 03 '12 at 15:32
check your browser console to see if there are any JS or HTML errors on the page — Cristian Lupascu, Oct 03 '12 at 15:34
@w0lf If you read, just one comment above, you will see that I already stated that it is not throwing any errors and in fact, I would always check that before posting here in the first place. — VoidKing, Oct 03 '12 at 15:55
@Veli wow, that's strange, it does work stand-alone... hmmm..... — VoidKing, Oct 03 '12 at 15:57
@VoidKing Sorry, I missed those comments. It's really weird that it doesn't work. I did a jsfiddle simulation like everybody else and it works great. — Cristian Lupascu, Oct 03 '12 at 15:58
in a case like this I would open the browser JS console and try to evaluate expressions like `$("#sIsGangMember")`, `$("#sIsGangMember").is(':checked')` etc. to see if all these really work — Cristian Lupascu, Oct 03 '12 at 16:00

score 0 · Answer 1 · edited May 23 '17 at 12:23

0

You will need to use click or mousedown instead of the change event.

jQuery checkbox change and click event

Ex. http://jsfiddle.net/qn8Kh/2/

For some more information on why this is: jQuery difference between change and click event of checkbox

edited May 23 '17 at 12:23

Community

1
1

answered Oct 03 '12 at 15:23

Dcullen

669
4
11

I try to stay away from click, mousedown, or mouseup when using checkboxes because you can't get those triggers to fire multiple times before a checkbox is actually "changed". I had an issue with this when checking and unchecking a box altered a numerical value based on addition and subtraction. You could trigger the altering multiple times with click, mousedown, or mouseup while the check only changed once, which of course is terrible for that scenario. In this scenario, however, I guess your answer would work fine, as it doesn't matter how many times the other box is triggered to uncheck – VoidKing Oct 03 '12 at 16:05
And I really feel like .change should work, even more so after reading your link – VoidKing Oct 03 '12 at 16:14
In the JS Fiddle example above are you running into the issue? That code working for me. – Dcullen Oct 03 '12 at 18:19

score 0 · Accepted Answer · answered Oct 03 '12 at 17:02

Okay, I really appreciate the help, and somehow (after hours of searching and researching what could be wrong) I knew it would be something silly.

Truth is, there is nothing wrong with using .change in this fashion.

My problem was that I accidentally put the functions:

$("#sIsGangMember").change(function () {

if ($("#sIsGangMember").is(':checked')) {
    document.getElementById("sIsNotGangMember").checked = false;
}
});

$("#sIsNotGangMember").change(function () {

if ($("#sIsNotGangMember").is(':checked')) {
    document.getElementById("sIsGangMember").checked = false;
}
});

All by themselves in the js file (e.g., not wrapped in (document).ready or jQuery(function) or anything....

That's lame, yes, I know xD sry about that, and thnx for your help, everyone!

Why won't this Code Work in jQuery/JavaScript for an HTML Form Working with Checkboxes?

2 Answers2