复选框分组 3答案

【问题标题】：CheckBox grouping 3复选框分组 3
【发布时间】：2017-06-27 13:27:06
【问题描述】：

我有一个复选框列表，我想更改它们的显示方式。

现在它们显示在列表中，但我想将它们并排显示在一个组中。

当有 7 个时，我想要一列有 3，另一列有 4。如果有 9 个，则应该以 3 个为一组显示

谢谢。

 <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 -->

【问题讨论】：

你有最大列数据数吗？

标签： html

【解决方案1】：

<!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检查这个解决方案。这是你问的吗？

【讨论】：

更改 col 值，如 col-sm-3,col-sm-3,col-sm-3,col-sm-3
是的，我试过了，但它与prntscr.com/fzrmj3的文本不一致
我已经更新了代码。如果您有任何问题，请告诉我。