使用jQuery判断Bootstrap checkbox是否是选中状态

jquery-bootstrap-checkbox-whether-checked-01

Bootstrap中判断checkbox是否为选中状态的jQuery方式有很多种，今天主要给大家介绍两种方式：一种是通过jQuery的prop方法，另一种则是通过jQuery的:checked选择器，两者的大概方法如下： 1.prop方式

 <script type="text/javascript">
    $(function () {
      $('#getChkValue').click(function () {
        var chk = $("#chkRemember");
        var checked = chk.prop('checked');
        if (checked) {
          alert("Checkbox is checked.");
        } else {
          alert("Checkbox is unchecked.");
        }
      });
    });
  </script>

2.:checked选择器方式

 <script type="text/javascript">
    $(function () {
      $('#getChkValue').click(function () {
        var chk = $("#chkRemember");
        var checked = chk.is(':checked');
        if (checked) {
          $('.message').text("Checkbox is checked.");
        } else {
          $('.message').text("Checkbox is unchecked.");
        }
      });
    });
  </script>

其实对比以上两种方式，就只有javascript代码中的一行有所不同，即：

var checked = chk.prop('checked');

var checked = chk.is(':checked');

完整的示例代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Bootstrap checkbox demo</title>
  <link href="Content/bootstrap.min.css" rel="stylesheet" />
  <script src="Scripts/jquery-2.1.4.min.js"></script>
  <script src="Scripts/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $('#getChkValue').click(function () {
        var chk = $("#chkRemember");
        var checked = chk.is(':checked');
        if (checked) {
          $('.message').text("Checkbox is checked.");
        } else {
          $('.message').text("Checkbox is unchecked.");
        }
      });
    });
  </script>
</head>
<body>
<div class="container" style="padding-top:50px">
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading">Bootstrap Checkbox Whether Checked Demo</div>
        <div class="panel-body">
          <div class="checkbox">
            <label>
              <input id="chkRemember" type="checkbox" value="0"> Remember me?
            </label>
          </div>
          <a id="getChkValue" class="btn btn-primary">Get Value</a>
          <div class="alert alert-warning alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <div class="message"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3"></div>
  </div>
</div>
</body>
</html>

使用jQuery判断Bootstrap checkbox是否是选中状态

发表评论