CheckBox分組3

我有一個複選框列表，我想改變它們顯示的方式。CheckBox分組3

現在他們顯示在一個列表中，但我想將它們並排顯示在一個組中。

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

來源

2017-06-27 user613507

你有最大數量的列數據嗎？ –

<!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檢查此解決方案one.IS這個你問什麼？

來源

2017-06-28 13:47:50

這不顯示他們在4組中 – user613507

更改col值，如col-sm-3，col-sm-3，col-sm-3，col-sm-3 –

yes'i試過，但它不對齊然後與文本 http://prntscr.com/fzrmj3 – user613507

回答

相關問題