Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.js"></script>
<form class="my-form" id="id_MyForm">

  <div class="form-group">
    <label class="qquestion">
      6) Which of the following is most relevant to you and why? (Select all that apply).
    </label>
    <div class="checkbox" id="id_Question6">
      <label>
        <input type="checkbox" id="input_que6a" value="Time" name="question6" /> Time
      </label>
      <textarea name="input_que6a" id="id_que6a" class="form-control" placeholder="Please provide the reason"></textarea>
      <br>

      <label>
        <input type="checkbox" id="input_que6b" value="Money" name="question6" /> Money
      </label>
      <textarea name="question6b_textarea" id="id_que6b" class="form-control" placeholder="Please provide the reason"></textarea>
      <br>

      <label>
        <input type="checkbox" id="input_que6c" value="Family" name="question6" /> Family
      </label>
      <textarea name="question6c_textarea" id="id_que6c" class="form-control" placeholder="Please provide the reason"></textarea>
      <br>

      <label>
        <input type="checkbox" id="input_que6d" value="Hobbies" name="question6" /> Hobbies
      </label>
      <textarea name="question6d_textarea" id="id_que6d" class="form-control" placeholder="Please provide the reason"></textarea>
      <br>

      <label>
        <input type="checkbox" value="Other" name="question6" id="other_que6" /> Other
      </label>
      <br>
      <textarea name="question6_textarea" id="id_Question6_textinput" class="form-control" placeholder="Please elaborate"></textarea>

    </div>
  </div>

  <div class="text-center">
    <button type="button"...

CSS

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */
var question6AnsArray = [];
var question6AnsOtherArray = [];

/* To hide all the text areas when the page loads */
$("#id_Question6_textinput").hide();
$("#id_q6_opH_textarea").hide();
$('#id_que6a').hide();
$('#id_que6b').hide();
$('#id_que6c').hide();
$('#id_que6d').hide();


/* To show appropriate text area for selected check box */
$('#input_que6a').click(function() {
  $("#id_que6a").fadeToggle(this.checked);
});
$('#input_que6b').click(function() {
  $("#id_que6b").fadeToggle(this.checked);
});
$('#input_que6c').click(function() {
  $("#id_que6c").fadeToggle(this.checked);
});
$('#input_que6d').click(function() {
  $("#id_que6d").fadeToggle(this.checked);
});

$('#other_que6').click(function() {
  $("#id_Question6_textinput").fadeToggle(this.checked);
});

$("#id_SubmitForm").click(function() {
  
  // To get all the selected checkbox values and their associated textareas
  $('input[name="question6"]:checked').each(function() {
    question6AnsArray.push(this.value);
  });
  var question6Answer = question6AnsArray.join(", ");
  alert(question6Answer);
});