整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<body> 全選<input type="checkbox" id="all" onclick="checkAll()"/><br/> <input type="checkbox" name="a" /> <input type="checkbox" name="a" /> <input type="checkbox" name="a" /> <input type="checkbox" name="a" /> <input type="checkbox" name="a" /> <input type="checkbox" name="a" /> <br/> <input type="button" value="必須選擇三個以上" onclick="f()"/> </body>
<script type="text/javascript">
function checkAll()
{
//第一步：根據ID找對象 （參照物）
var a=document.getElementById("all");
//第二步：找一堆小弟
var obj=document.getElementsByName("a");
//第三步：現在我們將小弟的checked屬性設置成與參照物一樣
for(var i=0; i<obj.length;i++)
{
//第四步;
//循環將obj對象里面的每一個元素的checked屬性設置成與a一樣
obj[i].checked=a.checked;
}
}
function f()
{
//根據name找對象 返回對象數組
var obj=document.getElementsByName("a");
//定義一個計數器
var count=0;
//循環對象數組
for(var i=0;i<obj.length;i++)
{
//判斷是否被選擇
if(obj[i].checked)
{
count++
}
}
//判斷是否符合要求
if(count <3)
{
alert("必須選擇至少3項");
}
}
</script>
同于服務器端腳本語言，例如php與ASP，Javascript是客戶端腳本語言，也就是說JavaScript是在用戶的瀏覽器上運行，不需要服務器的支持而可以獨立運行。所以在早期程序員比較青睞于JavaScript以減少對服務器的負擔，而與此同時也帶來另一個問題：安全性。而隨著服務器的強壯，雖然程序員更喜歡運行于服務端的腳本以保證安全，但JavaScript仍然以其跨平臺、容易上手等優勢大行其道。
Web前端教程
需求分析
商品分類界面中，當我們點擊全選框的時候，我們希望選中所有的商品，當我們取消掉的時候，我們希望不選中所有的商品
技術分析
checked="checked"選擇復選框
事件:onclick點擊事件
getElementsByTagName：返回包含帶有指定標簽名稱的所有元素的節點列表(集合/節點數組)。
getElementsByName：返回包含帶有指定類名的所有元素的節點列表。
步驟分析
全選和全部選步驟分析:
1.確定事件:onclick單機事件
2.事件觸發函數:checkAll()
3.函數要去做一些事情:
獲得當前第一個checkbox的狀態
獲得所有分類項的checkbox
修改每一個checkbox的狀態
代碼實現
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<!--
1.確定事件:文檔加載完成onload
2.事件要觸發函數:init()
3.函數:操作頁面的元素
要操作表格中每一行
動態的修改行的背景顏色
-->
<script>
functioninit(){
//得到表格
vartab=document.getElementById("tab");
//得到表格中每一行
varrows=tab.rows;
//便利所有的行,然后根據奇數偶數
for(vari=1;i<rows.length;i++){
varrow=rows[i];//得到其中的某一行
if(i%2==0){
row.bgColor="yellow";
}else{
row.bgColor="red"
}
}
}
/*
全選和全部選步驟分析:
1.確定事件:onclick單機事件
2.事件觸發函數:checkAll()
3.函數要去做一些事情:
獲得當前第一個checkbox的狀態
獲得所有分類項的checkbox
修改每一個checkbox的狀態
*/
functioncheckAll(){
// 獲得當前第一個checkbox的狀態
varcheck1=document.getElementById("check1");
//得到當前checked狀態
varchecked=check1.checked;
// 獲得所有分類項的checkbox
// varchecks=document.getElementsByTagName("input");
varchecks=document.getElementsByName("checkone");
// alert(checks.length);
for(vari=0;i<checks.length;i++){
// 修改每一個checkbox的狀態
varcheckone=checks[i];
checkone.checked=checked;
}
}
</script>
</head>
<bodyonload="init()">
<tableborder="1px"width="600px"id="tab">
<tr>
<td>
<inputtype="checkbox"onclick="checkAll()"id="check1"/>
</td>
<td>分類ID</td>
<td>分類名稱</td>
<td>分類商品</td>
<td>分類描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>1</td>
<td>手機數碼</td>
<td>華為,小米,尼康</td>
<td>黑馬數碼產品質量最好</td>
<td>
<ahref="#">修改</a>|<ahref="#">刪除</a>
</td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>2</td>
<td>成人用品</td>
<td>充氣的</td>
<td>這里面的充氣電動硅膠的</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>3</td>
<td>電腦辦公</td>
<td>聯想,小米</td>
<td>筆記本特賣</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>4</td>
<td>饞嘴零食</td>
<td>辣椒,麻花,黃瓜</td>
<td>年貨</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="checkone"/>
</td>
<td>5</td>
<td>床上用品</td>
<td>床單,被套,四件套</td>
<td>都是套子</td>
<td><ahref="#">修改</a>|<ahref="#">刪除</a></td>
</tr>
</table>
</body>
</html>
JavaScript是一種腳本語言，其源代碼在發往客戶端運行之前不需經過編譯，而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行。解釋語言的弱點是安全性較差，而且在JavaScript中，如果一條運行不了，那么下面的語言也無法運行。而且由于每次重新加載都會重新解譯，加載后，有些代碼會延遲至運行時才解譯，甚至會多次解譯，所以速度較慢。
以上是酷仔今日整理的“前端教程：使用JavaScript完成復選框的全選和全不選”一文，希望為正在學習Web前端的同學提供參考。
制表單中的單選按鈕
<html>
<head>
<title>單選項</title>
<style>
<!--
form{
padding:0px; margin:0px;
font:14px Arial;
}
p{
padding:2px; margin:0px;
}
-->
</style>
<script language="javascript">
function getChoice(){
var oForm=document.forms["myForm1"];
var aChoices=oForm.camera;
for(i=0;i<aChoices.length;i++) //遍歷整個單選項表
if(aChoices[i].checked) //如果發現了被選中項則退出
break;
alert("您使用的相機品牌是："+aChoices[i].value);
}
function setChoice(iNum){
var oForm=document.forms["myForm1"]; //獲取表單的節點
oForm.camera[iNum].checked=true; //設置某選項被選中
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="addInfo.php">
您使用的相機品牌：
<p>
<input type="radio" name="camera" id="canon" value="Canon">
<label for="canon">Canon</label>
</p>
<p>
<input type="radio" name="camera" id="nikon" value="Nikon">
<label for="nikon">Nikon</label>
</p>
<p>
<input type="radio" name="camera" id="sony" value="Sony" checked>
<label for="sony">Sony</label>
</p>
<p>
<input type="radio" name="camera" id="olympus" value="Olympus">
<label for="olympus">Olympus</label>
</p>
<p>
<input type="radio" name="camera" id="samsung" value="Samsung">
<label for="samsung">Samsung</label>
</p>
<p>
<input type="radio" name="camera" id="pentax" value="Pentax">
<label for="pentax">Pentax</label>
</p>
<p>
<input type="radio" name="camera" id="others" value="其它">
<label for="others">others</label>
</p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"></p>
<p><input type="button" value="檢測選中對象" onclick="getChoice();">
<input type="button" value="設置為Canon" onclick="setChoice(0);"></p>
</form>
</body>
</html>設置復選框(全選、全不選、反選):
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
