检查按钮的状态 - 复选框

时间:2016-12-24 04:14:23

标签: javascript twitter-bootstrap checkbox

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

当我使用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>

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

1 个答案:

答案 0 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;