当前位置: > > > jQuery - 操作复选框checkbox(判断是否选中、设置勾选状态)

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

在前文(JS - 操作复选框checkbox)中,介绍了如何通过纯 js checkbox(复选框、多选框)进行各种操作。本文演示如何使用 jQuery 实现同样的功能。
注意:使用prop()方法,而不要使用attr()方法。
checkboxradio 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);
评论0