jQuery checkbox选中问题之prop与attr注意点分析_jquery

本文实例分析了jQuery checkbox选中问题之prop与attr注意点。分享给大家供大家参考,具体如下:

一个网上很多的例子如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>test</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function () {
  // 全选
  $("#btnCheckAll").bind("click", function () {
    $("[name = chkItem]:checkbox").attr("checked", true);
  });
  // 全不选
  $("#btnCheckNone").bind("click", function () {
    $("[name = chkItem]:checkbox").attr("checked", false);
  });
  // 反选
  $("#btnCheckReverse").bind("click", function () {
    $("[name = chkItem]:checkbox").each(function () {
      $(this).attr("checked", !$(this).attr("checked"));
    });
  });
  // 全不选
  $("#btnSubmit").bind("click", function () {
    var result = new Array();
    $("[name = chkItem]:checkbox").each(function () {
      if ($(this).is(":checked")) {
        result.push($(this).attr("value"));
      }
    });
    alert(result.join(","));
  });
});
</script>
</head>
<body>
  <div>
    <input name="chkItem" type="checkbox" value="今日话题" />今日话题
    <input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点
    <input name="chkItem" type="checkbox" value="财经" />财经
    <input name="chkItem" type="checkbox" value="汽车" />汽车
    <input name="chkItem" type="checkbox" value="科技" />科技
    <input name="chkItem" type="checkbox" value="房产" />房产
    <input name="chkItem" type="checkbox" value="旅游" />旅游
  </div>
  <div>
    <input id="btnCheckAll" type="button" value="全选" />
    <input id="btnCheckNone" type="button" value="全不选" />
    <input id="btnCheckReverse" type="button" value="反选" />
    <input id="btnSubmit" type="button" value="提交" />
  </div>
</body>
</html>

运行后,在火狐下面发现一个问题百思不得其解

问题描述:第一次点全选可以,然后点击全不选,接着再点击全选、全不选、反选就没了反应,后来用其他浏览器发下可以,所以感觉是兼容性的问题,后来查阅资料发现果然是的,参考地址http://jquery.com/

解决方法:将attr换为prop即可,经过验证各个浏览器都是好的,官网说明是在1.6之后建议用prop,在此记录以备后用

下为效果图

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery form操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, checkbox
, attr
, 选中问题
prop
checkbox attr prop、jquery attr prop、jquery attr和prop、jquery的attr和prop、jquery checkbox prop,以便于您获取更多的相关知识。

时间: 2024-10-26 08:38:19

jQuery checkbox选中问题之prop与attr注意点分析_jquery的相关文章

jQuery 获取跨域XML(RSS)数据的相关总结分析_jquery

前段时间项目,需要前端JS获取跨域XML(RSS),最先打算使用jQuery.ajax方法获取,但是在ie9以下,提示"拒绝访问的" 略尴尬,网上查找了相关资料总结了以下几种方法: 一.google的jGFeed:相信很多同学对这个应该不陌生,使用也相对简单: 源码: (function($){ $.extend({ jGFeed : function(url, fnk, num, key){ // Make sure url to get is defined if(url == n

jQuery基础的工厂函数以及定时器的经典实例分析_jquery

1. jQuery的基本信息: 1.1 定义: jQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装, 1.2 作用: 许多使用JavaScript能实现的交互特效,使用jQuery都能完美地实现,下面通过五个用途来更多的了解. 1.2.1 访问和操作DOM元素 1.2.2 制作页面样式 1.2.3 对页面时间的处理 1.2.4 方便地使用jQuery插件 1.2.5 与Ajax的完美结合 1.3 优势: 想必有人就会问了:为什么人们会更多的选择jQuer

jquery checkbox选中两个方法

这种方法确实不错,但是我觉得如下代码更简单更高效: if($("input[name=cbname]:checkbox").length==0) // 没有选择中任项 根据需求选择了 方法二 方法二利用了遍历的方法,定义一个变量 来判断falg是否大于0,如果是就可以确实有选中的checkbox了哦. 实例1 function chk() //是否被选中验证有选中的return true,否return false { var falg = 0; $("input[name=

jQuery解析XML与传统JavaScript方法的差别实例分析_jquery

本文实例讲述了jQuery解析XML与传统JavaScript方法的差别.分享给大家供大家参考.具体分析如下: 1. 传统javascript方法: var xmlDoc = request.responseXML; try // Build Markers, if available { var markers = xmlDoc.getElementsByTagName("marker") ; for ( var i = 0; i < markers.length ; i++

基于jQuery的select下拉框选择触发事件实例分析_jquery

本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1

jQuery中的.bind()、.live()和.delegate()之间区别分析_jquery

DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行. 复制代码 代码如下: $('a').bind('click',function(){alert('that tickles!')}) 因此一个单击操作会触发alert函数的执行. click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素

JQuery中使文本框获得焦点的方法实例分析_jquery

本文实例分析了JQuery中使文本框获得焦点的方法.分享给大家供大家参考.具体分析如下: 由于JQuery中获得的对象还是JQuery对象,对其使用focus()只是使该对象获得onFocus()函数,不能是对象获得焦点,所以要使对象获得焦点,应该调用DOM对象的focus 方法,即: $("#id")[0].focus(); 需要注意两个函数之间的区别: $("#id").focus(); $("#id")[0].focus(); 第一个是增加

jQuery获取checkbox选中的值_jquery

1.问题背景 有几个多选框,选择其中的几个,获取选中的值 2.设计结果如下图所示: 3.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

jQuery判断checkbox选中状态_jquery

前言 神奇的JQuery怎么设置checkbox状态时好时坏?明明同一行代码,断点跟踪确实执行了,但是有时候好使,有时候却没有生效.毕竟对JS不是很熟悉,只是通过JS来处理前端HTML的标签的状态设置时,通过JQuery有时候会更方便些的,但是发现更不好办. 今天尝试实现checkbox全选.全不选功能,与App开发中的效果是一样的,勾选全选则将所有的选项都选中:同样取消勾选某个子项也将全选设置为非选中状态:所有子选项都为选中状态时,将全选设置为选中状态. 由于对JS不是很熟悉,于是尝试各种百度