新手小白问个简单的有关问题。关于checkbox全选全不选的有关问题
日期：2014-05-16 浏览次数：20379 次
新手小白问个简单的问题。关于checkbox全选全不选的问题。
先简单说下。
有一个是全选的checkbox，ID叫做"all"。
其他的checkbox，name都是"product"。
下面是我写的两个方法。用于全选和全不选。
第一个方法主要用于全选和全不选；
第二个方法的意思是如果我先勾了全选，然后取消掉下面任意一个，全选的那个勾也会消失。
同理，如果我先不勾全选。当我把下面四个内容依次勾上后，全选也跟着勾上。
我想问的是。有没有什么更简单的方[code=JScript][/code]法？！
还有就是。有没有可能将这两个方法写成一个方法。
求 赐教。。
------解决方案--------------------
先简单说下。
有一个是全选的checkbox，ID叫做"all"。
- JScript code
<input id="all" type="checkbox" value="全选" onclick="choiceall()" />
其他的checkbox，name都是"product"。
- JScript code
<input name="product" type="checkbox" value="1" onclick="judgethechoice()" /> <input name="product" type="checkbox" value="2" onclick="judgethechoice()" /> <input name="product" type="checkbox" value="3" onclick="judgethechoice()" /> <input name="product" type="checkbox" value="4" onclick="judgethechoice()" />
下面是我写的两个方法。用于全选和全不选。
- JScript code
function choiceall()
{
var getall=document.getElementById("all");
var getproduct=document.getElementsByName("product");
for(i=0;i<getproduct.length;i++)
{
if(getall.checked==true)
getproduct[i].checked=true;
else
getproduct[i].checked=false;
}
}
function judgethechoice()
{
var getall=document.getElementById("all");
var getproduct=document.getElementsByName("product");
for(i=0;i<getproduct.length;i++)
{
if(getproduct[i].checked==false)
getall.checked=false;
if(getproduct[i].checked==true&&getall.checked==false)
getall.checked=true;
}
}
第一个方法主要用于全选和全不选；
第二个方法的意思是如果我先勾了全选，然后取消掉下面任意一个，全选的那个勾也会消失。
同理，如果我先不勾全选。当我把下面四个内容依次勾上后，全选也跟着勾上。
我想问的是。有没有什么更简单的方[code=JScript][/code]法？！
还有就是。有没有可能将这两个方法写成一个方法。
求 赐教。。
------解决方案--------------------
- HTML code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
</style>
</head>
<body>
全选<input id="all" type="checkbox" value="全选" />
<br />
<input name="product" type="checkbox" value="1" />
<input name="product" type="checkbox" value="2" />
<input name="product" type="checkbox" value="3" />
<input name="product" type="checkbox" value="4" />
<script>
;(function(){
var all = document.getElementById('all');
var objs = document.getElementsByName('product');
var len = objs.length;
document.onclick = function(e){
e = window.event || e;
var t = e.srcElement || e.target;
var name = t.tagName.toLowerCase();
if( name == 'input' && t.type == 'checkbox' ){
if( t.id == 'all' ){
var flag = t.checked;
for(var i = 0; i < len; i++){
if( flag ){
objs[i].checked = true;
}else{
objs[i].checked = false;
}
}
}else if( t.name == 'product' ){
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
