jquery 实现的全选和反选

2016-02-19 16:05 2 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享jquery 实现的全选和反选,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

代码如下:
!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="Content-Type" content="text/html; charset=utf-8" /
style type="text/css"
#newsTable{margin:100px auto;}
/style
script language="javascript" type="text/javascript" src="jquery1.1.2.js"/script!-上传到网络上用这个做连接--
script language="javascript" type="text/javascript"
//阿会楠练习 2009-4-13
$(document).ready(function(){
$("#btnOk").click(function(){
this.value = this.value == "全选"?"反选":"全选";
$("input[@type='checkbox']").checkCbx();
});
});
//当你的代码出现each时,你应该重写上面的代码来构造一个插件,jquery教程中的一句话
$.fn.checkCbx = function(){
return this.each(function(){
this.checked = !this.checked;
});
}
/script
title无标题文档/title
/head

body
table border="1" id="newsTable"
tr
th选择/th
thId/th
th作者/th
/tr
tr
tdinput type="checkbox" name="cbx" //td
td1/td
td阿会楠/td
/tr
tr
tdinput type="checkbox" name="cbx" //td
td2/td
td阿会楠/td
/tr
tr
tdinput type="checkbox" name="cbx" //td
td3/td
td阿会楠/td
/tr
tr
tdinput type="checkbox" name="cbx" //td
td4/td
td阿会楠/td
/tr
tr
tdinput type="checkbox" name="cbx" //td
td5/td
td阿会楠/td
/tr
tr
tdinput type="checkbox" name="cbx" //td
td6/td
td阿会楠/td
/tr
tr
td colspan="3"input type="button" name="btnOk" id="btnOk" value="全选" //td
/tr
/table
/body
/html

来源:https://www.tulaoshi.com/n/20160219/1611043.html

延伸阅读
标签: Web开发
代码如下: script type="text/javascript" $(function() { $("#checkall").click(function() { $("input[@name='checkname[]']").each(function() { $(this).attr("checked", true); }); }); $("#delcheckall").click(function() { $("input[@name='checkname[]']").each(function() { $(this).attr("checked", false); }); }); ...
标签: Web开发
在一个表单中有很多CheckBox,请问如何实现选种一个而让所有的都选中?   ---------------------------------------------------------------   function  selectAll(checkBoxName){              var  elms  = ...
标签: Web开发
input type=checkbox name=mm value=a onclick="checkItem(this, ''mmAll'')"br input type=checkbox name=mm value=b onclick="checkItem(this, ''mmAll'')"br input type=checkbox name=mm value=c onclick="checkItem(this, ''mmAll'')"br input type=checkbox name=mm value=d onclick="c...
标签: Web开发
代码如下: html head meta http-equiv="Content-Type" content="text/html; charset=utf-8" title全选/title /head body divdemo input type="button" onclick="alert(ob.checkedIds());" value="选中ID"/ input type="button" onclick="alert(ob.checkedTexts());" value="选中值"/ input type="button" onclick="alert(ob.checked...
标签: Web开发
有很多人不知道在多选框中全选怎么还编写代码。其实很简单,下面就是代码以及说明,请仔细阅读。 以下是引用片段: script language="javascript" //代码说明(lulu163.com):form1为表单名,memberId为复选框,selectbutton为全选按钮    function selectAll()     { for (var i=0;idocument.form1.memberI...

经验教程

115

收藏

12
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部