display text when checkbox is checked

Question

I need to have a row of text display when a checkboxed is checked. I know this is pretty simple, but I am new to this and when I try to read other answers to this question I get lost.

this is what I have:

 function RiskPlanRqd()
  {
    $('#RiskMgmt').click(function()
    {
        if ($("#RiskMgmt").is(':checked')) 
        {
            $(".togglevisibility").show();
        } 
        else 
        {   
            $(".togglevisibility").hide();
        }
    }       )
  }

Then for the checkbox I have:

<input type="checkbox" id="RiskMgmt" />Risk Management Plan<br />

and for the text I want to show up if checked i have:

<td> <id="PlanStatus"; class="togglevisibility">Plan Status: </td>

I've edited your question to show the HTML. I *also* properly closed the opening `` tag (adding the `>` character). If this is omitted you have invalid HTML, so I'm *assuming* it was a typo. If *not* then your problem is invalid HTML, and you should roll the question back. Also you're missing the `=` characters to assign a value to the attributes in your `input` HTML tag, which makes *that* invalid HTML as well. — David Thomas, Aug 08 '13 at 21:36
@DavidThomas still looking for help if you can provide any insight on what is shown above — Dani, Aug 08 '13 at 23:06

Glitch Desire · Answer 1 · 2013-08-08T22:22:00.827

4

Quick fix...

You could fix this in place by fixing a typo and a value check...

if ($("#RiskMgmtPlan").val() == '1') should be if ($("#RiskMgmt").is(':checked')

Also Function should be function.

You also typo'd the ID declaration on the checkbox.

But, you can do this with a lambda...

$('#RiskMgmt').click(function(){
    if ($("#RiskMgmt").is(':checked')) {
        $("#PlanStatus").show();
        $("#CreatePlan").show();
        $("#NotStarted").show();
    } else {
        $("#PlanStatus").hide();
        $("#CreatePlan").hide();
        $("#NotStarted").hide();
    }
});

And, you can remove 4 lines of code by assigning classes...

Add class='togglevisibility' to your three elements you want to show & hide, then change the above to this:

$('#RiskMgmt').click(function(){
    if ($("#RiskMgmt").is(':checked')) {
        $(".togglevisibility").show();
    } else {
        $(".togglevisibility").hide();
    }
});

edited Aug 08 '13 at 22:22

answered Aug 08 '13 at 21:38

Glitch Desire

14,632
7
43
55

and the checkbox should be...... Risk Management Plan
– Dani Aug 08 '13 at 22:02
@Dani You need an `=` between `id` and `"RiskMgmt"`. If it were up to me I'd remove the `onClick='RiskPlanRQD();'` and use the 3rd option suggested. – Glitch Desire Aug 08 '13 at 22:03
then the initial function should be: function RiskPlanRqd() { if ($("#RiskMgmtPlan").is(':checked') { $("#PlanStatus").show(); $("#CreatePlan").show(); $("#NotStarted").show(); } else { $("#PlanStatus").hide(); $("#CreatePlan").hide(); $("#NotStarted").hide(); } – Dani Aug 08 '13 at 22:05
@Dani Change `$("RiskMgmtPlan").is(":checked")` to `$("RiskMgmt").is(":checked")`. Right now your function is looking for an element with ID `RiskMgmtPlan` but your checkbox is called `RiskMgmt`. – Glitch Desire Aug 08 '13 at 22:07
You really should use [.on()](http://api.jquery.com/on/) instead of `.click()`: `$(document).on('click', '#RiskMgmt', function() {` – Luke Shaheen Aug 08 '13 at 22:11
@John `.click(handler)` ([documentation](http://api.jquery.com/click/)) is a shorthand for `.on('click', handler)`. There is absolutely no difference in function but `.click` is more readable. And no, you should NOT bind an event to `document` instead of a specific DOM element. – Glitch Desire Aug 08 '13 at 22:14
1

@LightningDust Welp, learn something new, thanks for pointing that out. My fault for not reading more before I commented! – Luke Shaheen Aug 08 '13 at 22:25
function RiskPlanRqd() { $('#RiskMgmt').click(function() {if ($("#RiskMgmt").is(':checked')) {$(".togglevisibility").show(); } else {$(".togglevisibility").hide();} } )} – Dani Aug 08 '13 at 22:28
@Dani - You don't need that to be within a function. It is a handler with a bound [lambda function](http://stackoverflow.com/questions/16501/what-is-a-lambda-function). You can use the exact code I wrote in the 3rd example as long as you've put `class='togglevisibility'` on the elements you wish to toggle. – Glitch Desire Aug 09 '13 at 07:57

score 2 · Answer 2 · answered Aug 08 '13 at 21:41

2

Simplified version.. Bind the event, then toggle visibility based on the checkbox state.

$('#RiskMgmt').change(function(e) {
    $("#PlanStatus, #CreatePlan, #NotStarted").toggle(this.checked);
});

answered Aug 08 '13 at 21:41

Jason P

26,984
3
31
45

score 0 · Answer 3 · answered Aug 08 '13 at 21:37

0

jQuery(document).ready(function ($) {
    $('#RiskMgmt').bind('click',RiskPlanRqd);
});

Should work.

Alternatively:

<input type="checkbox" value "1" id="RiskMgmt" onclick="RiskPlanRqd();" />Risk Management Plan<br />

Should also work.

answered Aug 08 '13 at 21:37

AlliterativeAlice

11,841
9
52
69

-1: Not sure how you got upvotes, you've failed to spot that his function as written is broken. All you've helped him do is bind a broken function to a click. – Glitch Desire Aug 08 '13 at 21:53

score 0 · Answer 4 · answered Aug 08 '13 at 21:45

0

Try this:

$('#RiskMgmt').click(function(){
  if (this.checked) 
  {
    $("#PlanStatus").show();
    $("#NotStarted").show();    
  }
});

It shouldnt be harder then this, if the checkbox is checked, display whatever you want.

answered Aug 08 '13 at 21:45

Obsivus

8,231
13
52
97

display text when checkbox is checked

4 Answers4

Quick fix...