js全选删除(js删除选中的复选框)
js 脚本怎样实现checkbox的全选，反选，类似邮箱中邮件的全选后删除移动
注意代码未整理 待修正。不过基本功能是这样的，你也可以自己再改下。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
HTML
HEAD
TITLE admin control panel/TITLE
META NAME="Generator" CONTENT="EditPlus"
META NAME="Author" CONTENT=""
META NAME="Keywords" CONTENT=""
META NAME="Description" CONTENT=""
meta http-equiv="content-type" content="text/html; charset=utf-8" /
style
body{
color:#666;
font-family:Tahoma,Verdana,sans-serif,simsun;
font-size:12px;
}
select, label, textarea, input {
font-family:'lucida grande',tahoma,verdana,arial,simsun,sans-serif;
}
ul {
list-style-type:none;
padding:0px;
margin:0px;
}
h2{
color:#526ea6;
font-size:14px;
margin-left:8px;
}
a{
color:#000;
}
*{
margin:0px;padding:0px;
}
select{
border:1px solid #BDC7D8;
padding:2px;
width:100px;
}
#wrapper{
width:95%;
margin:0px auto;
border:5px solid #F0F8FF;
}
#header{
height:80px;
}
#header h1{
padding: 20px 7px 0px;
}
#header h1 span{
color:#FF6347;
font-size:12px;
margin-left:3px;
}
#mainNav ul{
height:35px;
padding-left:10px;
background:#ccc url(f2.gif);
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
#mainNav li{
float:left;
}
#mainNav li a{
font-size:14px;
line-height:35px;
color:#000;
text-decoration:none;
float:left;
display:block;
padding:0px 0px 0px 10px;
}
#mainNav li a b{
display:block;padding:0px 10px 0px 0px;
}
#mainNav li a:hover, #mainNav li a.current{
background:url(frame-mena.gif) left center no-repeat ;
}
#mainNav li a:hover b, #mainNav li a.current b{
background:url(frame-mena.gif) right center no-repeat ;
}
#contentWrapper{
padding:7px;
}
#ctrlPanl{
border:1px solid #ccc;height:30px;line-height:30px;padding:2px
}
#ctrlPanl #olink{
float:left;
}
#ctrlPanl #olink li{
float:left;
}
#ctrlPanl #olink li a{
display:block;
padding:0px 4px;
text-decoration:none;
}
#content{
margin:8px auto;
}
.gutter table{
width:100%;
border-collapse:collapse;
border:1px solid #ccc;
}
table th{
height:30px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
background:#F0F8FF
}
table tbody td{
height:30px;
text-align:center;
border-bottom:1px solid #ccc;
}
table tbody tr:hover td{
background:#F0FFF0;
}
table tbody tr.select td{
background:#F5FFFA;
}
table tfoot td{
height:30px;
background:#F0F8FF
}
.pagenav{
float:left;
}
.pagenav a, .pagenav span{
float:left;display:block;
margin-left:4px;
padding:2px 2px;
}
#footer{
}
#footer div{
color:#666;
padding:7px;
}
/style
/HEAD
script
var $ = function(id){
return document.getElementById(id);
}
function jtable(f, ctrl, chkCallback){
var achkbox = $(f).getElementsByTagName("input");
var ochkbox = [];
var otr = [];
for(var i = 0; i achkbox.length; i++){
if (achkbox[i].type.toLowerCase() == "checkbox" achkbox[i].id != ctrl){
ochkbox.push(achkbox[i]);
otr.push(achkbox[i].parentNode.parentNode);
}
}
$(ctrl).onclick = function(call){
for(var i = 0; i ochkbox.length; i++){
if (this.checked){
ochkbox[i].checked = 1;
ochkbox[i].parentNode.parentNode.className = "select";
}else{
ochkbox[i].checked = 0;
ochkbox[i].parentNode.parentNode.className = "";
}
}
chkCallback();
}
for(var i = 0; i otr.length; i++){
otr[i].onclick = function(){
if (this.x != "1"){
this.x="1";
this.className = "select";
this.getElementsByTagName("input")[0].checked = 1;
}
else{
this.x="0";
this.className = "";
this.getElementsByTagName("input")[0].checked = 0;
}
}
otr[i].onmouseover = function(){
if(this.x != "1")
this.style.background = "#F5F5F5";
else
this.style.background = "";
}
otr[i].onmouseout = function(){
if(this.x != "1")
this.style.background = "";
}
}
}
function Observer(){
}
Observer.prototype.update = function(arg){
return;
}
//Subject class construct
function Subject(){
this.Observers = [];
}
//Subject prototype methods
Subject.prototype = {
notify:function(context){
for(var i = 0; i this.Observers.length; i++){
this.Observers[i].update(context);
}
},
addObserver:function(obj){
this.Observers.push(obj);
}
}
Object.extend = function(d,s){
for(p in s){
d[p] = s[p];
}
return d;
}
function deleteObserver(){}
Object.extend(deleteObserver, Observer);
deleteObserver.update = function(num){
if (num)
{
document.getElementById("dbtn").style.color="#000";
}else{
document.getElementById("dbtn").style.color="#999";
}
}
var tt = 4;
function chkIsAll(){};
chkIsAll.update = function(num){
if (num == 0)
{
$("chkboxCtr").checked = 0;
}
if (num == 4)
{
$("chkboxCtr").checked = 1;
}
}
var oSub = new Subject();
oSub.addObserver(deleteObserver);
oSub.addObserver(chkIsAll);
var chkbox = {
chkState:{},
check:function(name){
var aChkbox = document.getElementsByTagName("input");
var tCount = 0;
for(var i = 0; i aChkbox.length; i++){
if (aChkbox[i].type == "checkbox" aChkbox[i].name == name aChkbox[i].checked)
{
if (!chkbox.chkState[name])
{
chkbox.chkState[name] = 0;
tCount += 1;
}else{
tCount += 1;
}
}
}
if (tCount != chkbox.chkState[name])
{
oSub.notify(tCount);
chkbox.chkState[name] = tCount;
}
}
}
/script
BODY
div id="wrapper"
div id="header"h1oweb for your easier online lifespan(重庆大学版)/span/h1/div
div id="mainNav"
ul
lia href="#" onfocus="this.blur()"b管理首页/b/a/li
lia href="#" onfocus="this.blur()" class="current"b产品/b/a/li
lia href="#" onfocus="this.blur()"b文章/b/a/li
lia href="#" onfocus="this.blur()"b图片/b/a/li
lia href="#" onfocus="this.blur()"b文件/b/a/li
lia href="#" onfocus="this.blur()"b留言/b/a/li
lia href="#" onfocus="this.blur()"b设置/b/a/li
/ul
div style="clear:both"/div
/div
div id="mainContent"
div id="contentWrapper"
h2 style="margin:4px auto"产品管理/书籍/h2
div id="ctrlPanl"
div id="olink"
ul
lia href="#" style="color:#999" id="dbtn"删除/a/li
lia href="#"添加新产品/a/li
lia href="#"管理分类/a/li
/ul
/div
/div
div style="clear:both"/div
div id="content"
div class="gutter"
form id="pForm" action="{$config.baseURL}/product/" method="post"
table
thead
tr
thinput type="checkbox" id="chkboxCtr" name="ctrl"//th
thID/th
th产品名/th
th所属分类/th
th产品图片/th
th产品添加时间/th
th是否显示/th
th是否推荐到首页/th
/tr
/thead
tbody
tr class="select"
tdinput type="checkbox" value="" name="id" onclick="javascript:chkbox.check('id')"//td
td1/td
td联想天逸电脑/td
td电脑/td
tdimg src="pt.gif" height="30px"//td
td2008-10-10/td
tdimg src="qun_kg_g.gif"//td
tdimg src="qun_kg_k.gif"//td
/tr
tr class="select"
tdinput type="checkbox" value="" name="id" onclick="javascript:chkbox.check('id')"//td
td2/td
td中华牌沙滩椅/td
td家具/td
tdimg src="pt.gif" height="30px"//td
td2008-10-02/td
tdimg src="qun_kg_g.gif"//td
tdimg src="qun_kg_k.gif"//td
/tr
tr class="select"
tdinput type="checkbox" value="" name="id" onclick="javascript:chkbox.check('id')"//td
td3/td
td无懈可击web设计/td
td书籍/td
tdimg src="pt.gif" height="30px"//td
td2008-02-10/td
tdimg src="qun_kg_g.gif"//td
tdimg src="qun_kg_k.gif"//td
/tr
tr
tdinput type="checkbox" value="" name="id" onclick="javascript:chkbox.check('id')"//td
td4/td
td联想轩逸电脑/td
td电脑/td
tdimg src="pt.gif" height="30px"//td
td2008-10-10/td
tdimg src="qun_kg_g.gif"//td
tdimg src="qun_kg_k.gif"//td
/tr
/tbody
tfoot
tr
td colspan="8"div class="pagenav"span3/5/spana href="#"首页/aa href="#"上一页/aa href="#"下一页/aa href="#"末页/a/div/td
/tr
/tfoot
/table
/form
/div
/div
/div
/div
div id="footer"divcopyright?2008 oweb alpha 1.0 test for test/div/div
/div
/BODY
/HTML
scriptjtable("pForm", "chkboxCtr", function(){chkbox.check('id')});/script
js写全选，怎么取消一个checkbox的选中状态，让全选的checkbox选中状态取消
写判断。
1.点击全选时是把所有的项加上checked
2.获取这个checked的数量
3.当checked数量不等于全部项的数量时，就把全选按钮的checked属性设为false
angularjs 全选反选
方法如下：
需要用到AngularJS特性：双向数据绑定
注意：没写一行DOM代码！这就是ng的优点，bootstrap.css为了布局，JS代码也只是简单创建ng模块和ng控制器。
效果：
代码如下：
!DOCTYPE html
html lang="en" ng-app="myModule5"!--3、ng-app="myModule5"启动ng并调用模块--
head
meta charset="UTF-8"
link rel="stylesheet" href="css/bootstrap.css"
title全选/取消全选/title
/head
body
div class="container" ng-controller="myCtrl5"!--4、ng-controller="myCtrl5"启用控制器--
h2全选和取消全选/h2
table class="table table-bordered"
thead
tr
th选择/th
th姓名/th
th操作/th
/tr
/thead
tbody
tr
td
input ng-checked="selectAll" type="checkbox"
/td
tdTom/td
td
button class="btn btn-danger btn-xs"删除/button
/td
/tr
tr
td
input ng-checked="selectAll" type="checkbox"
/td
tdMary/td
td
button class="btn btn-danger btn-xs"删除/button
/td
/tr
tr
td
input ng-checked="selectAll" type="checkbox"
/td
tdKing/td
td
button class="btn btn-danger btn-xs"删除/button
/td
/tr
/tbody
/table
input type="checkbox" ng-model="selectAll"
span ng-hide="selectAll"全选/span
span ng-show="selectAll"取消全选/span
/div
script src="js/angular.js"/script!--1、引入angularJS--
script
//2、创建自定义模块和控制器
angular.module('myModule5', ['ng']).
controller('myCtrl5', function($scope){
});
/script
/body
/html
ps：AngularJs 简单实现全选，多选操作。
js全选，反选，取消
!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN"
html
?head
??title?New?Document?/title
??script?type="text/javascript"
??//全选
function?test()
{
???var?f=document.getElementsByName("game");
???
for(var?i=0;if.length;i++)
{
if(f[i].checked==false)
{
f[i].checked=true;
}
}
}
//反选
function?ftest()
{
var?f=document.getElementsByName("game");
for(?var?i=0;if.length;i++)
{
if(f[i].checked==false)
{
f[i].checked=true;
}
else
{
f[i].checked=false;
}
}
}
//全部取消
function?CancelAll()
{
var?f=document.getElementsByName("game");
for(?var?i=0;if.length;i++)
{
if(f[i].checked==true)
{
f[i].checked=false;
}
}
}
??/script
?/head
?body
input?name="game"?type="checkbox"?value="lanqiu"/篮球
input?name="game"?type="checkbox"?value="zuqiu"/足球
input?name="game"?type="checkbox"?value="pingpangqiu"/乒乓球
input?name="game"?type="checkbox"?value="bangqiu"/棒球
input?name="game"?type="checkbox"?value="ganlanqiu"/橄榄球br/
input?type="button"?value="全选"?onclick="test()"/
input?type="button"?value="反选"?onclick="ftest()"/
input?type="button"?value="全不选"?onclick="CancelAll()"/
/body
/html
把if(f[i].checked=true) 改为?if(f[i].checked==true)
如何用JS实现多选框select的全选和取消全选
你自己改下控件名字就可以了啊！
下面自己放连个文件试
---
1.php
script
function $(id){
return document.getElementById(id);
}
function checkalls(obj,form){
var bool=(obj.checked)?true:false;
for(var i=0;iform.length;i++){
form.all[i].selected=bool;
}
}
/script
form action="2.php" method="post"
input type="checkbox" name="checkall" id="checkall" onclick="checkalls(this,$('select'))" checked全选br
select multiple name="select[]" id="select" size="15" style="width:210px;height:250px"
option value="1" selected顿饭大幅度/option
option value="2" selected大幅度/option
option value="3" selected大幅缩/option
option value="4" selected到司法所/option
/select
INPUT TYPE="submit" value="提交"
/form
---
2.php
?
echo $select[0];
echo $select[1];
echo $select[2];
echo $select[3];
?
JS无法实现全选和反选 应该怎么改
有几个地方可能有问题：
部分浏览器不支持form1.这种方法访问控件，使用document.方法。
if(elements[i].type=='checkbox') {
? if(elements[i].checked==false){
? ? ? ? ?elements[i].checked=true;}}
这样写会比较好点：
if (elements[i].type == 'checkbox') elements[i].checked = !elements[i].checked;