CODEWITHSUNDEEP
jqueryhtmlcheckbox
B. Clay Shannon-B. Crow Raven
B. Clay Shannon-B. Crow Raven

Reputation: 10247

Why does my checkbox's text continue to show when I hide or slideUp the checkbox?

I have created a checkbox in the code-behind like so:

Checkbox ckbxSendPDFToThisEmailAddr = new CheckBox();
ckbxSendPDFToThisEmailAddr.Text = "Send PDF to this email address?";
ckbxSendPDFToThisEmailAddr.ID = "ckbxSendPDFToThisEmailAddr";

...and am endeavoring to conditionally show or hide it in the client/jQuery code based on which of two radio buttons the user selects:

$(document).on("click", '[id$=rbPaymentForSelf]', function () {
    if (this.checked) {
        . . .
        $('[id$=ckbxSendPDFToThisEmailAddr]').slideUp();
        . . .
    }
});

$(document).on("click", '[id$=rbPaymentForSomeoneElse]', function () {
    if (this.checked) {
        . . .
        $('[id$=ckbxSendPDFToThisEmailAddr]').slideDown();
        . . .
    }
});

The problem is, it is only the checkbox itself that is being hidden - the text ("Send PDF to this email address?") still displays. Isn't the text part of the checkbox, and it should show/hide along with it?

Here is the generated HTML:

<input id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_ckbxSendPDFToThisEmailAddr" type="checkbox" name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ckbxSendPDFToThisEmailAddr" /><label for="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_ckbxSendPDFToThisEmailAddr">Send PDF to this email address?</label>

This makes me think the text is a quasi-independent element (a "label" but affiliated/associated with the checkbox). So do I need to give the text property an ID and reference that and hide it/slide it up separately?

What do I need to do to make the checkbox recognize its text as part and parcel of itself?

Upvotes: 0

Views: 63

Answers (1)

Ahs N
Ahs N

Reputation: 8366

Use this:

$('[id$=ckbxSendPDFToThisEmailAddr]').slideUp().next().slideUp();

and 

$('[id$=ckbxSendPDFToThisEmailAddr]').slideDown().next().slideDown();

The above will hide the label as well.

The text of the checkbox is contained is a span the immediately follows the checkbox element. Therefore you need to use next() to get the following element and hide it as well.

Upvotes: 2

Related Questions