复选框应用(全选单选，反选，选择)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-1.4.4.js"></script>
  </head>
  <body>
    <form method="post" action="">
      你喜欢的季节是什么？
      <input type="checkbox" id="CheckedAll" />全选/全不选
      <br />
      <input type="checkbox" name="items" value="春天" />春天
      <input type="checkbox" name="items" value="夏天" />夏天
      <input type="checkbox" name="items" value="秋天" />秋天
      <input type="checkbox" name="items" value="冬天" />冬天
      <br />
      <input type="button" id="send" value="提　交" />
    </form>
    <script type="text/javascript">
      $(document).ready(function () {
        //全选
        $('#CheckedAll').click(function () {
          if (this.checked) {
            //如果当前点击的多选框被选中
            $('input[type=checkbox][name=items]').attr('checked', true);
          } else {
            $('input[type=checkbox][name=items]').attr('checked', false);
          }
        });
        $('input[type=checkbox][name=items]').click(function () {
          var flag = true;
          $('input[type=checkbox][name=items]').each(function () {
            if (!this.checked) {
              flag = false;
            }
          });

          if (flag) {
            $('#CheckedAll').attr('checked', true);
          } else {
            $('#CheckedAll').attr('checked', false);
          }
        });
        //输出值
        $('#send').click(function () {
          var str = '你选中的是：\r\n';
          $('input[type=checkbox][name=items]:checked').each(function () {
            str += $(this).val() + '\r\n';
          });
          alert(str);
        });
      });
    </script>
  </body>
</html>
posted @ 2021-04-25 15:22  奋斗小青年1  阅读(121)  评论(0)    收藏  举报