How can I have multiple checkboxes appear when initial checkbox is checked (using PHP/Javascript)

Question

I am trying to implement a small part of my program where when an initial checkbox is clicked, it would open multiple checkboxes are opened up for selection. I don't want to use forloop (or dynamically) to create the multiple checkboxes but I need to manually create them.

My program is below and I am not sure why it doesn't work. If someone can kindly pleaes point me to my mistake, I would greatly appreciate. I am not skilled with PHP/JavaScript.

Thanks!

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
 <script type="text/javascript">
    $(document).ready(function() {
    //set initial state.
    $('#checkbox').val($(this).is(':unchecked'));

    $('#checkbox').change(function() {
        if($(this).is(":checked")) {
            var box = document.createElement("div");
            box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;
            document.myForm.appendChild(box);
            hasBox = true;
        }  
    });
});
</script>
</head>
<body>

<p>Click on this paragraph.</p>
<form action="">
<input id="checkbox" name="click" type="checkbox" onclick="check(this)"/>initial checkbox<br>

</body>
</html>

creeperdomain · Answer 1 · 2016-10-23T04:12:25.827

Your on the right track.

You have a few problems in your code.

1) You forgot to enclose your new checkbox tag within quotation marks.

    box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;

should be:

    box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";

Also note the change from type "chkbox" to "checkbox"

2) To set the initial state for a checkbox I would use the inbuilt prop function in JQuery. For example:

    $('#checkbox').prop('checked', false);

rather than your code of:

    $('#checkbox').val($(this).is(':unchecked'));

3) The last problem is when you append the new checkbox to the form. The way that i would do this is using JQuery again:

    $("#myForm").append(box);

and give the form element an id of "myForm"

Please find below my full code which works to your requirements:

$(document).ready(function() {
  //set initial state.
  $('#checkbox').prop('checked', false);

  $('#checkbox').on('click', function() {
    if($(this).is(":checked")) {
      var box = document.createElement("div");
      box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";
      $("#myForm").append(box);
      hasBox = true;
    }  
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>Click on this paragraph.</p>
<form action="" id="myForm">
  <input id="checkbox" name="click" type="checkbox"/>initial checkbox<br>
</form>

Hope that you found this useful.

For someone who has 31 SO points, you answered like a professional. +1 — GROVER., Oct 23 '16 at 04:14
Hmmm, it would be helpful if there was a way I can hide secondary boxes when initial box is unchecked. — Jim, Oct 23 '16 at 06:27
For just showing my method works, put if you want it to disappear once you have unchecked the box try user48147's answer for doing it in css. — creeperdomain, Oct 23 '16 at 07:19

score 3 · Answer 2 · edited May 23 '17 at 11:48

3

You can also do this with CSS:

.secondary-checkboxes
{
  display: none;
}

.primary-checkbox:checked ~ .secondary-checkboxes
{
  display: initial;
}

<input type="checkbox" class="primary-checkbox"> Primary checkbox
<br>
<div class="secondary-checkboxes">
  <input type="checkbox"> Secondary checkbox 1
  <br>
  <input type="checkbox"> Secondary checkbox 2
  <br>
  <input type="checkbox"> Secondary checkbox 3
  <br>
</div>

Source: this Stack Overflow question

edited May 23 '17 at 11:48

Community

1
1

answered Oct 23 '16 at 02:22

user48147

243
2
9

This has the issue that selecting the primary checkbox will show ALL secondary checkboxes in the page. To avoid the general sibling selector (~) and use the adjacent sibling selector (+) instead, you could use the ::before pseudo selector on .secondary-checkboxes with the properties content: ' '; display: block; That way you could remove the br. – user48147 Oct 25 '16 at 23:52

How can I have multiple checkboxes appear when initial checkbox is checked (using PHP/Javascript)

2 Answers2