資料來源：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>
2011年7月27日 星期三
2011年7月14日 星期四
2011年7月9日 星期六
【送養】HAPPY─黑的金光搶搶滾
大家好，我是HAPPY，現在的我還是個小朋友喔!!
身為一隻流浪犬，但在愛媽的悉心照料下，我的身體可是健康的很呢!!
毛色更是黑的金光搶搶滾~
我的優點除了可愛逗趣，活潑機靈以外，
最棒的就是我的身材，不但健壯...甚至小小年紀的我已經擁有大大的體型，
許多保全業者紛紛邀我加入他們的團隊。
 |
| 雖然我很大隻，但裝起可愛來也是不輸人的 |
 |
| 看看我的大耳朵，耳聽八方 |
 |
| 有好料就趕快享受一下吧!! |
 |
| 看看我的瘋狂掃堂尾 |
你需要有人看家、看工廠、看魚塭、給你瞻前顧後的服務嗎??
認養我就對了喔!!
想更進一步了解我或認養我，請找廖小姐，電話：0920621104
訂閱：
文章 (Atom)