jquery checkbox无法用attr()二次勾选问题的解决方法
2016-07-29来源:易贤网

下面小编就为大家带来一篇jquery checkbox无法用attr()二次勾选问题的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。

比如,如下HTML页面,一点【选中】、二点【取消选中】、三点【选中】,瞧,不行了呗。

1.html

<!doctype html>

<html lang="en">

<head>

 <meta charset="utf-8">

 <title>prop demo</title>

 <style>

 img {

  padding: 10px;

 }

 div {

  color: red;

  font-size: 24px;

 }

 </style>

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

 <input type="checkbox" checked="checked">

 <input type="checkbox">

 <input type="checkbox">

 <input type="checkbox" checked="checked">

<script>

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {

 return !val;

});

</script>

</body>

</html>

解决方案,是使用prop()替换attr()方法(在Jquery1.6以上),如下代码:

2.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Attr checked</title>

<script type="text/javascript" src="./js/jquery-1.11.2.js"></script>

<script type="text/javascript">

  function switchChecked(flag) {

    $("input[type='checkbox']").prop('checked', flag);

  }

</script>

</head>

<body>

  <input type="checkbox" />

  <input type="button" onclick="switchChecked(true)" value="选中">

  <input type="button" onclick="switchChecked(false)" value="取消选中">

</body>

</html>

以上这篇jquery checkbox无法用attr()二次勾选问题的解决方法就是小编分享给大家的全部内容了

2026公务员·事业单位培训课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息