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

Jquery 2015-08-28 2814浏览 收藏本文

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是否是选中状态