Hiding multiple form fields using checkboxes

Question

I have this code that I need to edit so I can use it on multiple chkBox's and txtBox's.
Currently I can only hide one input field with one check box.
I know HTML and CSS but I am not familiar with JS.
I would like to be able to add a number at the end of each ID.
chkBox1, chkBox2, chkBox3... txtBox1, txtBox2, txtBox3...

Do I need to change getElementById to getElementsByTagName()?

JSFIDDLE for some reason it does not work here...?

This is my current code which hide the text field unless the checkbox is checked:

function showHide(){
                var chkBox = document.getElementById("chkBox");
                var txtBox = document.getElementById("txtBox");
 
                if (chkBox.checked){
                    txtBox.style.visibility = "visible";
                } else {
                    txtBox.style.visibility = "hidden";
                }
            }

Your code will work if you put it in the head instead of onload. JSFiddle with no code changes. — Smern
– Smern, Commented May 22, 2014 at 18:17
Are you actually using jquery? If you are not using jquery in this project, then please remove the tag from the question. — 000
– 000, Commented May 22, 2014 at 18:20

Smern · Accepted Answer · 2014-05-22 20:14:27Z

1

The reason your code wasn't working is because it was running onLoad. Your DOM and the onclick were created before the load was complete. You could just move your code into your <head></head> tags and it will work as is. See here, all I did was select the "No wrap - in head", no code changes.

You could also continue to have your javascript run onLoad and remove your onclick and add an eventlistener in the javascript like this:

JSFiddle

var txtBox = document.getElementById("txtBox");
document.getElementById("chkBox").addEventListener("click", function() {
    if (this.checked) {
        txtBox.style.visibility = "visible";
    } else {
        txtBox.style.visibility = "hidden";
    }
});

If you have multiple instances of this, I would change your DOM a bit sort of like this:

<form>
    <div class="option">
        <input type="text" name="txtBox1" class="hiddenInput" />
        <br/>
        <input type="checkbox" name="chkBox1" id="chkBox1" class="showHideCheck" />
        <label for="chkBox1">Click me to show the text box</label>
    </div>
    <div class="option">
        <input type="text" name="txtBox2" class="hiddenInput" />
        <br/>
        <input type="checkbox" id="chkBox2" name="chkBox2" class="showHideCheck" />
        <label for="chkBox2">Click me to show the text box</label>
    </div>
</form>

and do your JQuery like this (since you previously tagged jquery):

$(".hiddenInput").hide();
$(".showHideCheck").on("change", function() {
    $this = $(this);
    $input = $this.parent().find(".hiddenInput");
    if($this.is(":checked")) {
        $input.show();
    } else {
        $input.hide();
    }
});

JSFiddle

Or with pure javascript and the similar DOM as above:

var checkBoxes = document.getElementsByClassName("showHideCheck");
for (var i = 0; i < checkBoxes.length; i++) {
    checkBoxes[i].addEventListener('click', function () {
        var txtBox = getAssociatedTextBox(this);
        if (this.checked) {
            txtBox.style.visibility = "visible";
        } else {
            txtBox.style.visibility = "hidden";
        }
    }, false);
}

function getAssociatedTextBox(ele) {
    var childNodes = ele.parentNode.childNodes;
    for (i = 0, j = childNodes.length; i < j; i++) {
        if (childNodes[i].className == "hiddenInput") {
            return childNodes[i];
        }
    }
}

JSFiddle

edited May 22, 2014 at 20:14

answered May 22, 2014 at 19:22

Smern

19.1k22 gold badges77 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alen Subasic Over a year ago

I have moved the code into the <head></head> tags, how could I edit the JS I have to work on separate <input type="text"> and <input type="checkbox"> fields? @smerny

Smern Over a year ago

@AlenSubasic, you had JQuery tagged earlier. Doing that kind of thing would be much cleaner with JQuery. Do you have it sourced? Also, are you able to change the DOM?

Smern Over a year ago

@AlenSubasic, updated to show how I would use jquery.

Rashmin Javiya · Accepted Answer · 2014-05-22 18:18:59Z

0

Try this,

Javascript

$(document).ready(function(){
    $("input[type=checkbox]").change(function(){

        var oTxt = $("#txtBox" + $(this).attr("id").replace("chkBox", ""));

        if($(this).is("checked"))
            oTxt.show()
        else
            oTxt.hide();
    });
});

HTML

<input type="checkbox" id="chkBox1"/>
<input type="textbox" id="txtBox1"/>

<input type="checkbox" id="chkBox2"/>
<input type="textbox" id="txtBox2"/>

answered May 22, 2014 at 18:18

Rashmin Javiya

5,2223 gold badges31 silver badges49 bronze badges

7 Comments

j08691 Over a year ago

The OP's code works. Plus why bother with jQuery when it can be done with some simple plain JavaScript?

Rashmin Javiya Over a year ago

Then why people uses jQuery? all that work can be done by javascript too. yes functionality is not complex but it good practice to use such framework, easy to understand and implement. Solution looks much clear.

j08691 Over a year ago

Most people use jQuery for more complex tasks, not because it looks pretty.

Smern Over a year ago

I try to avoid concatenation for ids. I would rather wrap the check/textbox in a div or something and use proximity... or use a data field if the stuff can be at random locations.

Rashmin Javiya Over a year ago

@j08691 if @AlenSubasic has not mentioned jQuery tag i would not go for jQuery.

|

Collectives™ on Stack Overflow

Hiding multiple form fields using checkboxes

2 Answers 2

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related