Question

我有一个包含2个按钮组的表单，我希望能够从两个组中选择一个选项。

这是我的代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
    <legend>Card Type</legend>
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Visa</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Master</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Amex</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Discover</button>
        </div>
        <input type="hidden" name="card_type" value=""/>
    </div>
</fieldset>
<fieldset id="ticket_type_fieldset">
    <legend>Ticket Type</legend>
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Regular</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">VIP</button>
        </div>
        <input type="hidden" name="ticket_type" value=""/>
    </div>
</fieldset>

Answer 1

一个选项是：

注意：我将hidden输入移到div.btn-group之外，以便在按钮组上有一个漂亮的边框半径。

$('button').click(function() {

  //Remove class selected on all buttons
  $(this).parents('fieldset').find('button').removeClass('selected');

  //Add class the clicked button
  $(this).addClass('selected'); 

  //Update the hidden field of the value    
  $(this).parents('fieldset').find('input[type="hidden"]').val( $(this).text() );

})

.selected {
  background-color: red!IMPORTANT;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
  <legend>Card Type</legend>
  <div class="btn-group btn-group-justified" role="group">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Visa</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Master</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Amex</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Discover</button>
    </div>
  </div>
  <input type="hidden" name="card_type" value="" />
</fieldset>
<fieldset id="ticket_type_fieldset">
  <legend>Ticket Type</legend>
  <div class="btn-group btn-group-justified" role="group">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">Regular</button>
    </div>
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-default">VIP</button>
    </div>
  </div>
  <input type="hidden" name="ticket_type" value="" />
</fieldset>

使用Bootstrap 4

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Doc：Radio Buttons

Answer 2

在这种情况下，我想使用一个复选框。然后你可以做一些css来适应复选框。你的代码将是

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
    <legend>Card Type</legend>
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Visa</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Master</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Amex</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Discover</button>
        </div>
        <input type="hidden" name="card_type" value=""/>
    </div>
</fieldset>
<fieldset id="ticket_type_fieldset">
    <legend>Ticket Type</legend>
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Regular</button>
<INPUT TYPE="Checkbox" Name="Browser" ID="C1" Value="Firefox">
        </div>
        <div class="btn-group" role="group">
            <button type="checkbox" class="btn btn-default">VIP</button>
<INPUT TYPE="Checkbox" Name="Browser" ID="C1" Value="Firefox">
        </div>
        <input type="hidden" name="ticket_type" value=""/>
    </div>
</fieldset>

请记住，我只编辑了最后两个按钮。感谢

Answer 3

要获得预期结果，请使用以下使用click事件和添加类

的选项

$("#card_type_fieldset .btn").click(function() {
  $("#card_type_fieldset .clicked").removeClass("clicked")
  $(this).addClass("clicked");
});

$("#ticket_type_fieldset .btn").click(function() {
  $("#ticket_type_fieldset .clicked").removeClass("clicked")
  $(this).addClass("clicked");
});

代码示例 - https://codepen.io/nagasai/pen/yKZZLd

＆＃13;

$("#card_type_fieldset .btn").click(function() {
  $("#card_type_fieldset .clicked").removeClass("clicked")
  $(this).addClass("clicked");
});

$("#ticket_type_fieldset .btn").click(function() {
  $("#ticket_type_fieldset .clicked").removeClass("clicked")
  $(this).addClass("clicked");
});

＆＃13;

.clicked {
    color: #333;
    background-color: #e6e6e6 !important;
    border-color: red !important
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset id="card_type_fieldset">
    <legend>Card Type</legend>
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Visa</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Master</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Amex</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Discover</button>
        </div>
        <input type="hidden" name="card_type" value=""/>
    </div>
</fieldset>
<fieldset id="ticket_type_fieldset">
    <legend>Ticket Type</legend>
    <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Regular</button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">VIP</button>
        </div>
        <input type="hidden" name="ticket_type" value=""/>
    </div>
</fieldset>

＆＃13;

Answer 4

我假设您使用按钮作为选项（唯一或多个），不是吗？请检查：

单选按钮（唯一）
复选框（多个）

然后使用CSS，如果你想要你在片段中显示的样式，你可以将它们看作是按钮。

Boostrap组件：https://getbootstrap.com/docs/3.3/components/ 链接示例：https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

Bootstrap 3.3.7按钮组 - 只能单击1个按钮

4 个答案: