jquery与js实现全选功能的区别

2024-03-22 06:33:20

一、jquery常用的事件

click(),dbclick()

focus(),blur()

change()

keydown(),keypress(),keyup()

mousedown(),mouseup() mouseenter(),mouseleave() mouseover(),mouseout() mousemove()

二、jquery挂事件

$（“p”）.bind("事件名称”，要执行的匿名函数)

$（“p”）.unbind("事件名称”)

三、jquery实现全选功能(重点是属性用.prop()，不用.attr())

代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="{utf-8}">
    <title></title>
    <script src="../jquery-3.2.0.js"></script>
  </head>
  <body>
    <form>
      <input type="checkbox" class="all"/>省市<br />
      <input type="checkbox" class="a"/>山东
      <input type="checkbox" class="a"/>山西
      <input type="checkbox" class="a"/>北京
      <input type="checkbox" class="a"/>河北
      <input type="checkbox" class="a"/>江苏
    </form>
  </body>
</html>
<script>
  $(".all").click(function(){
//    alert($(this)[0].checked);//如果选中则返回true;否则返回false
    var a= $(this)[0].checked; //dom对象
//   alert($(this).prop("checked"));
     var a=$(this).prop("checked");//获取jquery对象
//改变子复选框的状态 用prop代替attr，解决了之前用js写出现的bug,但是在源代码中查不到
  $(".a").prop("checked",a);
  })
</script>

对比js全选代码：{2017-05-03日的详情见数据访问（租房子多条件查询）}

function quanxuan(a,ff)
{
  var ck = document.getElementsByClassName(ff);
  if(a.checked)
  {
    for(var i=0;i<ck.length;i++)
    {
      ck[i].setAttribute("checked","checked");
    }
  }
  else
  {
    for(var i=0;i<ck.length;i++)
    {
      ck[i].removeAttribute("checked");
    }
  }
}
</script>

此外，jquery可以替代js的一切功能，除了settimeout,setinterval

jquery全选/全不选/反选另一种实现方法(配合原生js)

复制代码代码如下: <!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"> <head> <meta http-equiv=&qu
jquery、js操作checkbox全选反选

操作checkbox,全选反选复制代码代码如下: //全选 function checkAll() { $('input[name="TheID"]').attr("checked", "checked"); } //反选 function uncheckAll() { $('input[name="TheID"]').each(function() { this.checked = !this.checked; }) }
js与jQuery实现checkbox复选框全选/全不选的方法

本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法.分享给大家供大家参考,具体如下: 先来看看JavaScript实现checkbox复选框全选/全不选的方法.这应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,比如新浪邮箱中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一功能的呢?别着急,跟我一步一步实现. 我们先把那些带复选框的列表弄好,还没加全选.全不选时候的状态,大
Jquery CheckBox全选方法代码附js checkbox全选反选代码

jquery方法如下: 复制代码代码如下: function CheckAll(val) { $("input[name='chkJob']").each(function() { this.checked = val; }); $("#chkAll").attr("checked", val);//设定全选按钮状态 } val 该参数传递的是全选按钮的选择状态 name='chkJob' 这个为列表中的checkbox名称 chkAll 就为
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)

日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数. 功能介绍点此查看DEMO演示 1. 全选/全不选选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致; 2. 自动更改全选/全不选选框的状态, 即列
jquery与js实现全选功能的区别

一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mouseup() mouseenter(),mouseleave() mouseover(),mouseout() mousemove() 二.jquery挂事件 $("p").bind("事件名称",要执行的匿名函数) $("p").unbi
jQuery实现列表的全选功能

只需要几行代码就可以实现列表的全选功能,并且可以配合post请求执行后台的删除程序 js 复制代码代码如下: function DelAlert(data) { if(data == 'error') { alert("错误-"); } else if(data == 'success') { alert("成功-");
jquery写个checkbox——类似邮箱全选功能

以前用原生 JS 写过 checkbox--类似邮箱全选功能,点击这里.最近在学习jquery,今天抽空用jquery 写个checkbox--类似邮箱全选功能. 复制代码代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>checkbox</title> </head> &l
jquery实现简单的全选和反选功能

首先我们看个简单的实例 <!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"> <head runat="server"&g
jQuery实现checkbox全选功能完整实例

本文实例讲述了jQuery实现checkbox全选功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>www.jb51.net jQuery实现checkBox全选</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.
基于JS实现checkbox全选功能实例代码

需求:要求实现点击全选选中所有菜单,再次点击全选取消选中.此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l
JS中如何实现复选框全选功能

js实现复选框全选功能,代码如下所示: <? include_once("inc/auth.inc.php"); include_once("inc/utility_all.php"); include_once("inc/utility_org.php"); $connstatus = ($connstatus) ? true : false; if(!isset($TYPE)) $TYPE="0"; $ITEMS_I
简单的Jquery全选功能

记载一段最简单的全选功能Jquery代码.[code]$(function(){ $("#chkAll").click(function(){ $("input:checkbox").attr("checked",$(this).attr("checked")); });});[/code]
jquery实现全选功能效果的实现代码

主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" value="全选/全不选"/>全选/全不选 <br /> <input type="checkbox" name="items" value="足球" />足球 <input type=&qu
js实现全选反选不选功能代码详解

本文实例为大家分享了js实现全选反选不选功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <meta charset='utf-8' /> <body> <input type='checkbox' name='id' />哈哈<br/> <input type='checkbox' name='id' />哈哈<br/> <input type='checkbox'

jquery与js实现全选功能的区别

相关推荐

随机推荐