title: How to change the Checkbox icon to behave like **indeterminate** with "+" and "-" Symbols
body: <p><strong>I have checkbox with its original behaviour. I wanted to add + and - symbols to it while expanding and collapsing those checkbox.</strong></p>
  
  <p>Can any one please tell me how can I achieve this ?</p>
  
  <p>Following is my Code in jade: </p>
  
  <pre><code>.form-group
    .checkbox#some-checkbox(style="margin-left: 10px;")
      label(data-toggle='collapse', data-target='#collapseOne', aria-expanded='false', aria-controls='collapseOne')
        input(type='checkbox')
        |  My Name
  #collapseOne.collapse(aria-expanded='false')
    .well1
      .row    
        .col-sm-12.col-lg-12
          .nutrition-category
            .row.header3.margin-left-10
                .row.paragraph
                  .col-xs-6(style="font-size: 18px;")  New Name
  </code></pre>
  
  <p>Non Jade (HTML) Code:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
   &lt;div class="checkbox" id="some-checkbox" style="margin-left: 10px"&gt;
   &lt;label data-toggle="collapse" data-target="#collapseOne" aria-
     expanded="false" aria-controls="collapseOne"&gt;
     &lt;input type="checkbox"/&gt; My Name
   &lt;/label&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="collapse" id="collapseOne" aria-expanded="false"&gt;
    &lt;div class="well1"&gt;
      &lt;div class="row"&gt;   
       &lt;div class="col-sm-12 col-lg-12"&gt;
        &lt;div class="nutrition-category"&gt;
         &lt;div class="row header3 margin-left-10"&gt;
          &lt;div class="row paragraph"&gt;
            &lt;div class="col-xs-6" style="font-size: 18px"&gt; New 
            Name&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>and here is the javascript that i have used for it:</p>
  
  <pre><code>script(type='text/javascript').
  $(document).ready(function() {
  $("#some-checkbox").prop("indeterminate", true);
  });
  </code></pre>