jQuery - 操作复选框checkbox（判断是否选中、设置勾选状态）

作者：hangge | 2016-10-15 10:05

在前文（JS - 操作复选框checkbox）中，介绍了如何通过纯 js 对 checkbox（复选框、多选框）进行各种操作。本文演示如何使用 jQuery 实现同样的功能。

注意：使用prop()方法，而不要使用attr()方法。
像 checkbox，radio 和 select 这样的元素，选中属性对应“checked”和“selected”。这些属于 HTML 元素固有属性，因此需要使用 prop 方法去操作才能获得正确的结果。如果使用 attr 的话，会发现其选中状态并不会按我们想象的一样变化。

1，判断是否勾选

下面样例中，按钮点击后会弹出 checkbox 的勾选状态（是否选中）。

<html>
  <head>
    <title>hangge.com</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script>
    function btnClick() {
      var isChecked = $('#checkbox1').prop('checked');
      alert(isChecked);
    }
    </script>
  </head>
  <body>
    <input id="checkbox1" type="checkbox" value="101"/>
    <label for="checkbox1">复选框1</label>
    <br><br>
    <button type="button" onclick="btnClick()">获取checkbox选中状态</button>
  </body>
</html>

2，设置将其勾选

$('#checkbox1').prop('checked', true);

3，取消勾选

$('#checkbox1').prop('checked', false);

其他

jQuery - 操作复选框checkbox（判断是否选中、设置勾选状态）

全部评论（0）