关于checkbox全选与全不选遇到的问题

HTML:

  <div class="outbox">

    <label for="box">全选</label>

    <input type="checkbox" id="box"/>

  </div>

  <div class="outbox2">

    <label for="box1">选项1</label>

    <input type="checkbox" id="box1" name="goods"/>

    <label for="box2">选项2</label>

    <input type="checkbox" id="box2" name="goods"/>

  </div>

第一种方法:

  $("#box).click(function(){

    if($(this).is(":checked)){

      $("input[name=‘goods‘]").attr("checked","checked");

    }else{

      $("input[name=‘goods‘]").removeAttr("checked","checked");

    }

  })

  本以为这种方法能完成全选与全不选的功能,但是当第一次点击时,能正确全选,再点击也能正确全不选;但是当再次点击的时候,就不能全选与全不选了,点了完全没作用。找不到原因是什么!

第二种方法:

  $("#box).click(function(){

    if(this.checked){

      $("input[name=‘goods‘]").each(function(){

        this.checked=true;

      })

    }else{

      $("input[name=‘goods‘]").each(function(){

        this.checked=false;

      })

    }

  })

  这种方法就能正确的实现全选与全不选的功能了。这又是为什么呢?

第三种方法:

 1)$("#box).change(function(){

    $("input[name=‘goods‘]").prop("checked",this.checked);

  })

 2)$("#box).click(function(){

    if($(this).is(":checked")){

      $("input[name=‘goods‘]").prop("checked",true);

    }else{

      $("input[name=‘goods‘]").prop("checked",false);

    }

  })

  

  或者是把prop里的布尔值,true改成“checked”,false改成 “ ”。也可已实现全选与全不选的功能。

疑问:为什么prop就可以直接赋值,而attr这样赋值就不行呢?

  我一开始的时候,checkbox是未选中状态,alert($("#box").attr("checked"))一直返回的是defined,但是alert($("#box").prop("checked"))返回的就是false;这是为什么捏?

  有位网友也遇到过类似的问题,链接:http://www.jb51.net/article/51136.htm

  原因是在jquery1.6版本,对checked属性在页面初始化的时候已经初始化好了,不会随着状态的改变而改变。也就是说如果checkbox在页面加载完毕是选中的,那么返回的永远都是选中状态,但是如果一开始就没有被选中,返回的永远是undefined。

  prop()函数用于设置或返回当前jq对象所匹配的元素的属性值,该函数属于jq对象。如果要删除DOM元素的属性,就用removeProp()函数

  prop()与attr()的区别:链接:http://www.365mini.com/page/jquery-attr-vs-prop.htm

时间: 2024-11-08 05:21:40

关于checkbox全选与全不选遇到的问题的相关文章

一个checkbox 用jquery实现全选、全不选

之前因为一个很小的错误弄了很久,现在才做好. 效果图: 肯定还有更简单的方法. 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Checkbox.aspx.cs" Inherits="WebApp.Test.Checkbox" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http:

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

jquery checkbox的相关操作——全选.反选.获得所有选中的checkbox 1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2.取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']&

Android开发CheckBox控件,全选,反选,取消全选

在Android开发中我们经常会使用CheckBox控件,那么怎么实现CheckBox控件的全选,反选呢 首先布局我们的界面: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_paren

jQuery实现的checkbox复选框全选和全不选效果

jQuery实现的checkbox复选框全选和全不选效果:复选框的全选和全不选效果在代码中非常的常用,尤其在批量处理的需求中更是如此,下面就通过一个代码实例简单介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

表单javascript checkbox全选 反选 全不选

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>javascript checkbox全选 反选 全不选</title> <meta name="des

一行jQuery代码搞定checkbox 全选和全不选

在网站建设中:让复选框全部选中和全部取消是比较常用的:下面就介绍如何用一句话搞定全选功能: 其实很简单:那就是使用盘点jQuery弃用的函数这篇文章中最后一段代码: 好了,我要介绍的方法讲完了: 好吧,别砸鸡蛋:我是开个玩笑:代码在下面 JavaScript部分: function checkAll(obj){     $("#box input[type='checkbox']").prop('checked', $(obj).prop('checked')); } html部分:

jQuery实现CheckBox全选、全不选

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head runat="server"> 4 &

html checkbox 实现全选/取消全选

html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> <th><input type="checkbox" onclick="swapCheck()" /></th> <th>Month</th> <th>Savings</th> </tr

jquery checkbox全选,全不选,反选方法,jquery checkbox全选只能操作一次

jquery checkbox全选,全不选,反选方法, jquery checkbox全选只能操作一次, jquery checkbox全选只有第一次成功 Js代码  下载 /** * 全选 * 对于Jquey1.7.2+版本,使用attr会造成只能操作一次. * 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. * 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. * @param checkName */ function checkAll(chec