javascript - 如何将引导按钮与输入复选框链接起来？

Question

我想找到一种方法来按照以下方式链接引导按钮类？

 <!-- HTML -->
        <div class="col-md-6 col-sm-6">
            <label class="btn btn-primary">
                <input type="checkbox">
                    <i class="flaticon-groceries"></i>
                    <span>Grocery</span>
                    <a>select</a>
            </label>
        </div>
        <div class="col-md-6 col-sm-6">
            <label class="btn btn-primary">
                <input type="checkbox">
                    <i class="flaticon-cooking"></i>
                    <span>Cooking</span>
                    <a>select</a>
            </label>
        </div>
        <div class="col-md-6 col-sm-6">
            <label class="">
                <input type="checkbox">
                    <i class="flaticon-house-cleaning"></i>
                    <span>Cleaning</span>
                    <a>select</a>
            </label>
        </div>
        <div class="col-md-6 col-sm-6>
            <label class="">
                <input type="checkbox" ng-model="mySelfHandyman" >
                    <i class="flaticon-handyman-1"></i>
                    <span>Handyman</span>
                    <a>select</a>
            </label>
        </div>


 <!-- jquery -->
$('input[type="checkbox"]).on('change',function(){
$('input[type="checkbox"]').not(this).prop('checked', false);
});

使用输入作为 radio 类型不是一个选项。他们必须是复选框。期望的结果是当 checkbox = true 时，按钮(在本例中为标签)应该处于事件状态，并且当我们选择不同的复选框时，前一个按钮应该进入其默认状态并且当前按钮应该处于事件状态。情况还要求一次只选中 1 个复选框。 jquery 可以解决该问题，但我无法在单击复选框时在默认状态和事件状态之间切换按钮。目前我必须点击按钮两次才能删除事件类。第一次单击使复选框 = true 和按钮类 = 事件，如果我单击第二个复选框，它使前一个复选框 = false 和 (this) = true，但它也使当前按钮类 = 事件，而无需将前一个按钮的类更改为默认。我真的很感激在这件事上的任何帮助。谢谢

Answer 1

处理独占状态的方法是使所有对象处于一种状态(例如关闭)，然后然后返回并将事件状态更改为其唯一状态(例如打开)。因此，使用 jQuery 选择器 :checkbox 让您的生活更轻松，并使用 this 过滤实际点击的复选框/按钮。

此外，我稍微更改了 HTML。当 Bootstrap 正确完成时，它遵循该模式。

.container~~~▼

~~~~~~~~~~~.row~~~▼

~~~~~~~~~~~~~~.col-md-6~~~~~~~.col-md-6

行的子项加起来必须等于 x=12，(例如 .col-lg-4、.col-lg-4、.col-lg-4)

片段

$(':checkbox').on('change', function() {
  $(':checkbox').prop('checked', false);
  $(this).prop('checked', true);
});

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/css/flat-ui.min.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<main class='container'>
  <section class='row'>
    <div class="col-md-12 col-sm-12">
      <label class="btn btn-primary">
        <input type="checkbox">
        <i class="flaticon-groceries"></i>
        <span>Grocery</span>
        <a>select</a>
      </label>
      <label class="btn btn-primary">
        <input type="checkbox">
        <i class="flaticon-cooking"></i>
        <span>Cooking</span>
        <a>select</a>
      </label>
    </div>
  </section>
  <section class='row'>
    <div class="col-md-12 col-sm-12">
      <label class="btn btn-primary">
        <input type="checkbox">
        <i class="flaticon-house-cleaning"></i>
        <span>Cleaning</span>
        <a>select</a>
      </label>
      <label class="btn btn-primary">
        <input type="checkbox" ng-model="mySelfHandyman">
        <i class="flaticon-handyman-1"></i>
        <span>Handyman</span>
        <a>select</a>
      </label>
    </div>
  </section>
</main>