when a checkbox is checked how to display a different hidden element using javascript

Question

I have a form on my site, which has a dropdown box set to display:none; in CSS. I am trying to reveal the dropdown (display: inline;) when a checkbox of another element is checked. What would be possible solution here?

When, #Give_to_a_specific_Project is checked, #choose_a_specific_project_from_dropdown should be set to CSS as display: inline; Here is the HTML: Codepen: http://codepen.io/mizan/pen/yNbqRa

<form method="POST" action="" class="sc-checkout-form" id="hello_donation_form" data-sc-id="1" data-parsley-validate="" novalidate="">
<div class="sc-form-group">
    <label>
        <input type="checkbox" id="Give_to_a_specific_Project" class="sc-cf-checkbox" name="sc_form_field[Give_to_a_specific_Project]" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_1" data-parsley-multiple="sc_form_fieldGive_to_a_specific_Project" data-parsley-id="0210">Give To A Specific Project?</label>
    <input type="hidden" id="Give_to_a_specific_Project_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[Give_to_a_specific_Project]" value="No">
    <div id="sc_cf_checkbox_error_1">
        <ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldGive_to_a_specific_Project"></ul>
    </div>
</div>
<div class="sc-form-group">
    <select class="sc-form-control sc-cf-dropdown" id="choose_a_specific_project_from_dropdown" name="sc_form_field[choose_a_specific_project_from_dropdown]" data-parsley-id="8242">
        <option value="HeartCrest Educational Center – Tema – Ghana" selected="" data-sc-price="HeartCrest Educational Center – Tema – Ghana">HeartCrest Education</option>
        <option value="Hae Mona Children Home – Sebokeng – South Africa" data-sc-price="Hae Mona Children Home – Sebokeng – South Africa">Hae Mona Children Home</option>
        <option value="Akuafo Farms – Ghana" data-sc-price="Akuafo Farms – Ghana">Akuafo Farms</option>
    </select>
    <ul class="parsley-errors-list" id="parsley-id-8242"></ul>
</div>
<div class="sc-form-group">
    <label>
        <input type="checkbox" id="recurring_monthly_gift" class="sc-cf-checkbox" name="sc_form_field[recurring_monthly_gift]" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_2" data-parsley-multiple="sc_form_fieldrecurring_monthly_gift" data-parsley-id="4913">Make this a recurring monthly gift</label>
    <input type="hidden" id="recurring_monthly_gift_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[recurring_monthly_gift]" value="No">
    <div id="sc_cf_checkbox_error_2">
        <ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldrecurring_monthly_gift"></ul>
    </div>
</div>
<div class="sc-form-group">
    <label>
        <input type="checkbox" id="project_update_by_email" class="sc-cf-checkbox" name="sc_form_field[project_update_by_email]" checked="" value="Yes" data-parsley-errors-container="#sc_cf_checkbox_error_3" data-parsley-multiple="sc_form_fieldproject_update_by_email" data-parsley-id="7080">Receive Project Updates By Email</label>
    <input type="hidden" id="project_update_by_email_hidden" class="sc-cf-checkbox-hidden" name="sc_form_field[project_update_by_email]" value="Yes">
    <div id="sc_cf_checkbox_error_3">
        <ul class="parsley-errors-list" id="parsley-id-multiple-sc_form_fieldproject_update_by_email"></ul>
    </div>
</div>
<button class="sc-payment-btn"><span>Give by Credit Card</span></button>

possible duplicate of [jQuery if checkbox is checked](http://stackoverflow.com/questions/7960208/jquery-if-checkbox-is-checked) — Dryden Long, Jun 08 '15 at 20:30

score 1 · Answer 1 · answered Jun 08 '15 at 20:31

1

Use the onchange event of the checkbox. onchange check if the box is checked and if it is then show the select box.

answered Jun 08 '15 at 20:31

IMTheNachoMan

5,343
5
40
89

The form is generated by plugin, so no option to edit inside the form element. It should be done without touching the form. – Mizan Jun 08 '15 at 20:34
**After the form is loaded**, find the element and attach an onchange event. It'll be easier if you're using jQuery but something like `document.getElementById("id_of_checkbox").onchange = function(){ check if the box is checked or not and do what you need }` – IMTheNachoMan Jun 08 '15 at 20:36

score 1 · Accepted Answer · answered Jun 08 '15 at 20:40

I had to clean up your code quite a bit. There were a number of things wrong:

jQuery isn't loaded in your CodePen project
#choose_a_specific_project_from_dropdown was misspelled
You were not instantiating $(document).ready() correctly
You were attempting to listen for .changed() which doesn't exist
- Now we're listening for .click() event
You were not showing/hiding the dropdown correctly. You were using .next() but that isn't necessary since you are referencing it by an ID selector.

Working CodePen project: http://codepen.io/anon/pen/bdWxVE

JavaScript code:

$(document).ready(function() {
    $('#Give_to_a_specific_Project').click(function( event ){
        if ($(this).is(':checked')) {
            $('#choose_a_specific_project_from_dropdown').show();    
        }
        else {
          $('#choose_a_specific_project_from_dropdown').hide();    
        }
    });
});

I am a beginner of JS. I forgot to load the jQuery. Once loaded it worked. — Mizan, Jun 09 '15 at 12:06

score 0 · Answer 3 · answered Jun 08 '15 at 20:50

If I have understood your question correctly, you can achieve this with CSS alone, with no JavaScript or jQuery. Here's a demo. Click on the [+] button to reveal the text.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Toggle Visibility</title>
  <style>
input[type=checkbox] {
position: absolute;
clip:rect(0 0 0 0)
}
input[type=checkbox]~label span::after{
content: "+";
}
label {
position: absolute;
right: 0;
width: 1em;
height: 1em;
background-color: #fff;
border: 1px solid #000;
color: #000;
text-align: center;
}

/* Default State */
p#show-me {
background: #900;
width: 100%;
text-align: center;
overflow: hidden;
color: #fff;
box-sizing: border-box;
font-size: 1.35em;
margin:0 0 1.5em;
display: none;
}

/* Toggled State */
input[type=checkbox]:checked ~ label span::after{
content: "-";
}
input[type=checkbox]:checked ~ p#show-me{
display: inline;
}
  </style>
</head>

<body>
<input type="checkbox" id="hide">
  <label for="hide" onclick=""><span></span></label>
<p id="show-me">Click on the checkbox to hide this text.</p>
</body>
</html>

when a checkbox is checked how to display a different hidden element using javascript

3 Answers3