Question

我想创建一个看起来像按钮的复选框：当选中它时，按钮看起来很紧;当取消选中时，该按钮看起来没有按下。

当我使用bootstrap时，我自然会想到使用data-toggle="buttons-checkbox"。但验证复选框的状态似乎不太实际。例如，.prop('checked')似乎不适用于以下代码。

  $('#input-checkbox').click(function () {
    if ($("#input-checkbox").prop('checked')) {
      alert("yes");
    } else {
      alert("no");
    }
  });

<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="btn-group" data-toggle="buttons-checkbox">
    <button type="button" class="btn btn-default active" id="input-checkbox">INPUT</button>
  </div>
</body>

有谁知道那里有什么问题？

Answer 1

为您的按钮添加value属性。我将btn-default更改为btn-primary并在旁边添加了一个普通按钮来说明差异。

＆＃13;

$('#input-checkbox').click(function () {
    if ($("#input-checkbox").attr('value')=="checked"){
      $("#input-checkbox").attr('value','notchecked');
      $("#input-checkbox").removeClass('active');
    } 
    else {
      $("#input-checkbox").attr('value','checked');
      $("#input-checkbox").addClass('active');
    }
  });

＆＃13;

.btn:focus,.btn:active {
   outline: none !important;
}

＆＃13;

<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="btn-group" data-toggle="buttons-checkbox">
    <button type="button" class="btn btn-primary active" value="checked" id="input-checkbox">INPUT</button>
    <button type="button" class="btn btn-primary"> NPUT</button>
  </div>
</body>

＆＃13;

检查按钮的状态 - 复选框

1 个答案: