Creating a dynamic checkbox list with jquery and bootstrap CSS

Question

really hoping someone can help me out because this is driving me mad! I'm relatively new to Javascript and Bootstrap so I'm sure it's something obvious

I'm trying to create a set of checkboxes from an array of data to an attendance form. I'm using bootstrap and specifically the checkbox and buttons to generate a dynamic set of buttons.

Whatever I try, the buttons don't draw correctly. Test code below which shows a button correctly drawing, then when I try and click another button to draw more buttons, what gets displayed is incorrectly formatted. They are small with no text and have no label - hope this makes sense. Everything looks the same between the working button and the jquery that creates the buttons so I'm at a complete loss!

function loadButtons() {
  for (var i = 1; i <= 6; i++) {
    var $chk = $('<div class="btn-group-toggle" data-toggle="buttons"><label class="btn btn-secondary active"><input type="checkbox" checked> Checked');
    $("#append").append($chk);
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<h1>Hello, world!</h1>
<div id="append" name="append">Append here</div>
<button onclick="loadButtons()" b>button</button>
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

None of your tags are closed. You need to append </label></div> to the end of that string. — user5734311
– user5734311, Commented Dec 6, 2019 at 10:26
Here's a non-"compose HTML string" solution: jsfiddle.net/khrismuc/zLpbqgou — user5734311
– user5734311, Commented Dec 6, 2019 at 10:33
Ah - that's great - now I feel stupid! I'm sure I tried that but it appears not - thanks again! — Ian963741
– Ian963741, Commented Dec 6, 2019 at 10:53
Thanks for the non-compose HTML string fiddle Chris - is that a more efficient way than composing a string? I need to pass some parameters into the checkbox (like id and whether it's checked) which I think either way will support? — Ian963741
– Ian963741, Commented Dec 6, 2019 at 11:06
Both ways will work, but I much prefer the way I showed in the fiddle. If you're going to insert variables as classes or other attributes, string composition will get messy quickly. In fact, about 5 questions per week are about resulting typos or masking issues arising exactly because of messy and unreadable code with multiple types of quotes in direct succession — user5734311
– user5734311, Commented Dec 6, 2019 at 11:16

Shubham Baranwal · Accepted Answer · 2019-12-06 10:30:24Z

I think you just missed the closing tags for label and div.

Try below code -

function loadButtons() {
  for (var i = 1; i <= 6; i++) {
    var $chk = $('<div class="btn-group-toggle" data-toggle="buttons"><label class="btn btn-secondary active"><input type="checkbox" checked> Checked</label></div>');
    $("#append").append($chk);
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<h1>Hello, world!</h1>
<div id="append" name="append">Append here</div>
<button onclick="loadButtons()" b>button</button>
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

RonnyKnoxville · Accepted Answer · 2019-12-06 12:31:12Z

Im not sure what you mean by 'not correctly formatted', but yes the other answer is correct you just werent closing the tags.

When you're creating code like this, you can cut it right down to make it clearer to read and reduce the risk of missing errors like that.

Something like this:

function loadButtons() {
  let button = $('.btn-group-toggle').clone();
		
  for (var i = 1; i <= 6; i++) {
     $("#append").append(button.html())
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<h1>Hello, world!</h1>
<div id="append" name="append">Append here</div>
<button onclick="loadButtons()" b>button</button>
<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

Collectives™ on Stack Overflow

Creating a dynamic checkbox list with jquery and bootstrap CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related