使用引导程序在表单中选择多个按钮

的代码如下：

<div class="form-group"> 
    <div> 
     <h4>Extras</h4> 
    </div> 
    <div class="radio-inline">    
     <input type="button" class="btn btn-default inline" name="extra" value="Garden" > 
     <input type="button" class="btn btn-default inline" name="extra" value="Balcony"> 
     <input type="button" class="btn btn-default inline" name="extra" value="Parking"> 
    </div> 
</div>

不过，我想做出选择不是相互排斥的，即你可以选择这两个“花园”和“阳台” - 我想保留的按钮造型。

任何人都可以帮忙吗？

编辑：好吧 - 有什么奇怪的事情现在 - 有这个代码。

<div class="btn-group" data-toggle="buttons"> 
         <label class="btn btn-default"> 
         <input type="checkbox" name="garden" checked=""> Garden 
         </label> 
         <label class="btn btn-default"> 
         <input type="checkbox"> Balcony 
         </label> 
         <label class="btn btn-default"> 
         <input type="checkbox"> Parking 
         </label> 
        </div>

当我使用bootply多重选择的用户功能的伟大工程 - 当我把它添加到我的网页 - 它不工作 - 没有任何人有任何想法，为什么这可能是？下面是整个页面

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"><h2>This is the header</h2></div> 
    </div> 

    <div class="row"> 
     <div class="col-md-8"> 
      <h2>Hello world!</h2> 
      <form d="multiform" role="form" action="listing.php" method="post" enctype="multipart/form-data"> 
       <div><h4>Listing Type</h4></div> 

       <div class="radio">       
        <input type="button" class="btn btn-default" value="For Sale" > 
        <input type="button" class="btn btn-default inline" name="list_type" value="For Rent"> 
        <input type="button" class="btn btn-default inline" name="list_type" value="Flat Share"> 
       </div>      
       <div class="form-group"> 
        <label for="text">Title</label> 
         <input class= "form-control" type="text" name="text"> 
       </div> 

       <div class="form-group"> 
       <label for="desc">Description</label> 
       <textarea class= "form-control" name="desc" rows="5"></textarea> 
       </div> 


     <!nested columns in the first one!> 
      <div class="col-md-6"> 

        <div class="form-group"> 
        <label for="total_beds">Total Bedrooms</label> 
         <select class="form-control" name="total_beds"> 
           <option>Total Bedrooms</option> 
           <option>1</option> 
           <option>2</option> 
           <option>3</option> 
           <option>4</option> 
           <option>5</option> 
          </select> 
         </div> 


         <div class="form-group"> 
        <label for="pets">Pets</label> 
         <select class="form-control" name="pets"> 
           <option>Pets OK?</option> 
           <option>Yes</option> 
           <option>No</option> 

          </select> 
         </div> 


        <p>This is another p</p> 
      </div> 
      <div class="col-md-6"> 
         <div class="form-group"> 
         <label for="postcode">Postcode (for Maps)</label> 
         <input type="text" class="form-control" name="postcode" placeholder="Post Code"> 
       </div> 
      </div> 
      <div class="col-md-12"> 

       <div class="form-group"> 
        <div><h4>Extras</h4> 
         <div class="checkbox">    
          <input type="button" class="btn btn-default inline" name="extra" value="Garden" > 
          <input type="button" class="btn btn-default inline" name="extra" value="Balcony"> 
          <input type="button" class="btn btn-default inline" name="extra" value="Parking"> 
        </div> 
       </div> 

        <div class="btn-group" data-toggle="buttons"> 
         <label class="btn btn-default"> 
         <input type="checkbox" name="garden" checked=""> Garden 
         </label> 
         <label class="btn btn-default"> 
         <input type="checkbox"> Balcony 
         </label> 
         <label class="btn btn-default"> 
         <input type="checkbox"> Parking 
         </label> 
        </div> 
      </div> 
      </form> 



     </div> 

     <div class="col-md-4">Hello world Right!  </div> 


</div><! closes container!>

来源

2014-09-06 Mobaz

尝试使用复选框不是单选的。我设置了一个bootply，但点击某个元素时没有变化。如果您可以重现问题并将其发布在有帮助的引导程序中。 http://www.bootply.com/LX5VZk8sCH# – Dan 2014-09-06 14:30:37

嗨丹 - 多数民众赞成 - 谢谢 - 但问题仍然在bootply - 我只能选择其中之一 - 花园 - 阳台或停车场 - 我想要的行动能够挑选这些例如的任何组合“花园”和“阳台”等 – Mobaz 2014-09-06 22:46:34

见JavaScript buttons section of the Bootstrap documentation，并期待在checkbox按钮：

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary active"> 
    <input type="checkbox" checked> Option 1 (pre-checked) 
    </label> 
    <label class="btn btn-primary"> 
    <input type="checkbox"> Option 2 
    </label> 
    <label class="btn btn-primary"> 
    <input type="checkbox"> Option 3 
    </label> 
</div>

来源

2014-09-06 14:31:21 rybo111

使用引导程序在表单中选择多个按钮

回答

相关问题