氣質寶貝吳咏洳
2011年7月27日 星期三
【JS】CheckBox全選/全不選
資料來源：http://somnolentcat.pixnet.net/blog/post/24858430
Ｑ：如何製作全選功能的Checkbox呢？！
相信大家都有經驗，做了一個選項功能，然後剛開始選項不多，慢慢勾也沒什麼問題，可是漸漸的選項越來越多變成幾十個的時候一個一個勾就變成很痛苦的事情了....
對使用者來說是非常不方便的，那要如何在前端做全選功能勒？！
前端？！
說到前端就知道一定是使用Javascript啦，那就來吧！
--------------8<------------
首先，要先把Checkbox加上Group群組，不然你會一個一個加ID，選到瘋掉......
Form的部份是第一種方式要用到的。
--------------8<------------
<form>
<input type="checkbox" name="CH1" value="1" group="1" >
<input type="checkbox" name="CH1" value="2" group="1" >
<input type="checkbox" name="CH1" value="3" group="1" >
</form>
--------------8<------------
接著呢，在全選的Checkbox怎麼做?!
記得要將ID名稱設好，還有在Onclick的地方下事件。
--------------8<------------
<input type="checkbox" name="checkbox" value="checkbox" id="checkall" onclick="checkall1()" >
--------------8<------------
事件創好名稱了，裡面怎麼寫呢？！
函式名稱記得要跟Onclick下的一樣名字喔！
我就常常Key錯，用複製的最穩！
--------------8<------------
這邊有兩種方式～
第一種，使用Form去找尋Form內的物件名為Checkbox的，且Group是1的
然後將Checked改成跟Check1(全選選取按鈕)一樣，這樣就可以全選 / 取消全選。
請注意：此方式一定要將Checkbox包在Form內
--------------8<------------
function checkall1()
{
var check1 = document.getElementById("checkall");
var e = document.forms[0].elements;
for (var i=0;i<e.length;i++)
if (e[i].type == "checkbox" && e[i].group == "1")
e[i].checked = check1.checked;
}
</script>
--------------8<------------
第二種方式，直接搜尋CheckBox的名稱，然後直接套用全選按鈕(Check1)的Checked。
--------------8<------------
function checkall1()
{
var check1 = document.getElementById("checkall");
var check2 = document.getElementsByName("CH1");
for(var i=0;i<check2.length;i++)
{
check2[i].checked=check1.checked;
}
}
資料來源：http://www.wowbox.com.tw/blog/article.asp?id=2923
<!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" />
<title>CheckBox全選或全不選</title>
<style type="text/css">
p {margin:0;font-size:12px;line-height:26px;}
</style>
<script type="text/javascript">
function check_all(obj,cName)
{
var checkboxs = document.getElementsByName(cName);
for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked = obj.checked;}
}
</script>
</head>
<body>
<p><input type="checkbox" name="all" onclick="check_all(this,'c')" />全選/全不選</p>
<p><input type="checkbox" name="c" value="" /></p>
<p><input type="checkbox" name="c" value="" /></p>
<p><input type="checkbox" name="c" value="" /></p>
<p><input type="checkbox" name="c" value="" /></p>
</body>
</html>
Ｑ：如何製作全選功能的Checkbox呢？！
相信大家都有經驗，做了一個選項功能，然後剛開始選項不多，慢慢勾也沒什麼問題，可是漸漸的選項越來越多變成幾十個的時候一個一個勾就變成很痛苦的事情了....
對使用者來說是非常不方便的，那要如何在前端做全選功能勒？！
前端？！
說到前端就知道一定是使用Javascript啦，那就來吧！
--------------8<------------
首先，要先把Checkbox加上Group群組，不然你會一個一個加ID，選到瘋掉......
Form的部份是第一種方式要用到的。
--------------8<------------
<form>
<input type="checkbox" name="CH1" value="1" group="1" >
<input type="checkbox" name="CH1" value="2" group="1" >
<input type="checkbox" name="CH1" value="3" group="1" >
</form>
--------------8<------------
接著呢，在全選的Checkbox怎麼做?!
記得要將ID名稱設好，還有在Onclick的地方下事件。
--------------8<------------
<input type="checkbox" name="checkbox" value="checkbox" id="checkall" onclick="checkall1()" >
--------------8<------------
事件創好名稱了，裡面怎麼寫呢？！
函式名稱記得要跟Onclick下的一樣名字喔！
我就常常Key錯，用複製的最穩！
--------------8<------------
這邊有兩種方式～
第一種，使用Form去找尋Form內的物件名為Checkbox的，且Group是1的
然後將Checked改成跟Check1(全選選取按鈕)一樣，這樣就可以全選 / 取消全選。
請注意：此方式一定要將Checkbox包在Form內
--------------8<------------
function checkall1()
{
var check1 = document.getElementById("checkall");
var e = document.forms[0].elements;
for (var i=0;i<e.length;i++)
if (e[i].type == "checkbox" && e[i].group == "1")
e[i].checked = check1.checked;
}
</script>
--------------8<------------
第二種方式，直接搜尋CheckBox的名稱，然後直接套用全選按鈕(Check1)的Checked。
--------------8<------------
function checkall1()
{
var check1 = document.getElementById("checkall");
var check2 = document.getElementsByName("CH1");
for(var i=0;i<check2.length;i++)
{
check2[i].checked=check1.checked;
}
}
資料來源：http://www.wowbox.com.tw/blog/article.asp?id=2923
<!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" />
<title>CheckBox全選或全不選</title>
<style type="text/css">
p {margin:0;font-size:12px;line-height:26px;}
</style>
<script type="text/javascript">
function check_all(obj,cName)
{
var checkboxs = document.getElementsByName(cName);
for(var i=0;i<checkboxs.length;i++){checkboxs[i].checked = obj.checked;}
}
</script>
</head>
<body>
<p><input type="checkbox" name="all" onclick="check_all(this,'c')" />全選/全不選</p>
<p><input type="checkbox" name="c" value="" /></p>
<p><input type="checkbox" name="c" value="" /></p>
<p><input type="checkbox" name="c" value="" /></p>
<p><input type="checkbox" name="c" value="" /></p>
</body>
</html>
2011年7月14日 星期四
訂閱：
文章 (Atom)