Question

单击两个蓝色按钮之一（一次只能选择一个）时，它被选中。但是，当我单击Buy按钮时，先前的蓝色按钮未被选中。因此，我无法通过黄色按钮的onclick读取蓝色按钮的值。

提琴here。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Sign in Success</title>
</head>
<body>
    <div class="btn-group" style="background:black;width:100%">
        <button type="button" class="btn btn-default">Tr</button>
        <div style="width:10px"></div>
        <button type="button" class="btn btn-default">T</button>
        <div style="width:10px"></div>
        <button type="button" class="btn btn-default">Vt</button>
        <div style="width:10px"></div>
        <button type="button" class="btn btn-default">Rt</button>
    </div>
    <br> <br>
    <h2 style="text-decoration:underline;" align="center">T</h2>
    <div align="center"><!-- id="centerit" -->
        <br> <br> <br>
        <!-- <div style="width:50px"></div> -->
        <button type="button" class="btn btn-primary cust" value="bu">Butter</button>
        <button type="button" class="btn btn-primary cust" value="mi">Milk</button>
        <button type="button" class="btn btn-primary cust" value="bi">Biscuit</button>
        <br> <br>
        <button type="button" class="btn btn-warning" value = "submit">Buy!</button>
    </div>
</body>
</html>

我希望当我点击blue button时buy button仍然处于选中状态。

Answer 1

您可以将按钮放入表单中，并将三个蓝色按钮替换为单选按钮。请参阅此处的文档： https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons

更新的小提琴：https://jsfiddle.net/0wj1m8ce/

 <div class="btn-group btn-group-toggle"  data-toggle="buttons" >
      <label class="btn btn-primary cust">
        <input type="radio" name="options" id="option1" autocomplete="off" value="bu"> Butter
      </label>
      <label class="btn btn-primary cust">
        <input type="radio" name="options" id="option2" autocomplete="off" value="mi"> Milk
      </label>
      <label  class="btn btn-primary cust">
        <input type="radio" name="options" id="option3" autocomplete="off" value="bi" > Biscuit
      </label>
    </div>

Answer 2

尝试添加单选按钮，而不是按钮

这就是您所需要的

<div id="radioBtn" class="btn-group">
    <a class="btn btn-primary btn-sm active" data-toggle="fun" data-title="bu">Butter</a>
    <a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="mi">Milk</a>
    <a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="bi">Biscuit</a>
</div>

<script>
    $('#radioBtn a').on('click', function(){
    var sel = $(this).data('title');
    var tog = $(this).data('toggle');
    $('#'+tog).prop('value', sel);

    $('a[data-toggle="'+tog+'"]').not('[data-title="'+sel+'"]').removeClass('active').addClass('notActive');
    $('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})
</script>

<style>
#radioBtn .notActive{
    color: #3276b1;
    background-color: #fff;
}
</style>

这是更新后的JSFiddle

如何使用引导程序在单击同一页面上的另一个按钮时保持选择的按钮？

2 个答案: