CheckBox grouping 3

Question

I have a list of checkboxes and I want to change the way they are showing.

Now they are showing in a list, but I want to show them in a group side by side.

When there are 7 I would like a column with 3 and another column with 4. If there are 9, it should show in groups of 3

Thanks.

 <div class="box box-info">

     <div class="box-header with-border">
         <h3 class="box-title">info</h3>
     </div>
     <div class="form-group">
         <div class="col-sm-offset-2 col-sm-10">
             <div class="checkbox">
                 <label>
                     <input type="checkbox" ng-model="7" id="7"> 7
                 </label>
             </div>
         </div>
     </div>
     <div class="form-group">
         <div class="col-sm-offset-2 col-sm-10">
             <div class="checkbox">
                 <label>
                     <input type="checkbox" ng-model="6" id="6"> 6
                 </label>
             </div>
         </div>
     </div>
     <div class="form-group">
         <div class="col-sm-offset-2 col-sm-10">
             <div class="checkbox">
                 <label>
                     <input type="checkbox" ng-model="5" id="5"> 5
                 </label>
             </div>
          </div>
      </div>
      <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                  <label>
                      <input type="checkbox" ng-model="4" id="4"> 4
                  </label>
              </div>
          </div>
      </div>
      <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                  <label>
                      <input type="checkbox"  id="3"> 3
                  </label>
              </div>
          </div>
      </div>
      <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                  <label>
                      <input type="checkbox" id="2"> 2
                  </label>
              </div>
          </div>
      </div>
      <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                  <label>
                      <input type="checkbox" id="1"> 1
                  </label>
              </div>
          </div>
      </div>
  </div> <!-- /.box box-info -->

Do you have have maximum number of column data ? – Hema Nandagopal Jun 27 '17 at 14:04 — Hema Nandagopal, Jun 27 '17 at 14:04

Hema Nandagopal · Answer 1 · 2017-07-28T07:47:09.547

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style type="text/css">
            .checkbox + .checkbox, .radio + .radio {
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div class="container">

            <br/><br/>
            <input type="button" value="AddCheckbox" id="btnSave" />
            <input type="button" value="Display Checkbox value" id="displayBtn" />
            <br/><br/>

            <div class="row text-center" >
                <div class="col-md-12" id="cblist" ></div>
            </div>

        </div>
    </body>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnSave').click(function() {
                addCheckbox();
            });

            $('#displayBtn').click(function() {
                displayValue();
            });
        });

        function addCheckbox(name) {
            var container = $('#cblist');
            var inputs = container.find('input');
            var id = inputs.length+1;

            $html = '<div class="checkbox col-xs-3">';
            $html += '<label><input type="checkbox" name="cb[]" value="cb'+id+'" id="cb'+id+'">hello '+id+'</label>';
            $html += '</div>';

            container.append($html);
        }

        function displayValue(){

            $('input[type="checkbox"]:checked').each(function() { //Get the only checked item
                console.log($(this).val());
            });

        }
    </script>
</html>

Trying to add checkbox dynamically does not display the value in UI but in console it is displayed Check the solution for this one.IS this what you asked?

change the col value, like col-sm-3,col-sm-3,col-sm-3,col-sm-3 — Hema Nandagopal, Jul 24 '17 at 19:01
yes 'ive tried that but it dont align then with the text http://prntscr.com/fzrmj3 — user613507, Jul 24 '17 at 20:04

CheckBox grouping 3

1 Answers1