<html >
<head>
<script type="text/javascript">
window.onload = function(){//頁面所有元素加載完畢
var btn = document.getElementById("btn"); //獲取id為btn的元素(button)
btn.onclick = function(){ //給元素添加onclick事件
var arrays = new Array(); //創建一個數組對象
var items = document.getElementsByName("check"); //獲取name為check的一組元素(checkbox)
for(i=0; i < items.length; i++){ //循環這組數據
if(items[i].checked){ //判斷是否選中
arrays.push(items[i].value); //把符合條件的 添加到數組中. push()是javascript數組中的方法.
}
}
alert( "選中的個數為："+arrays.length );
}
}
</script>
</head>
<body>
<form method="post" action="#">
<input type="checkbox" value="1" name="check" checked="checked"/>
<input type="checkbox" value="2" name="check" />
<input type="checkbox" value="3" name="check" checked="checked"/>
<input type="button" value="你選中的個數" id="btn"/>
</form>
</body>
</html>
jquery隔行換色
<html >
<head>
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){// dom元素加載完畢
$('#tb tbody tr:even').css("backgroundColor","#888");//偶數行
$('#tb tbody tr:odd').css("backgroundColor","red");//奇數行
//獲取id為tb的元素,然后尋找他下面的tbody標簽，再尋找tbody下索引值是偶數的tr元素,
//改變它的背景色.
})
</script>
</head>
<body>
<table id="tb">
<tbody>
<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
<tr><td>第三行</td><td>第三行</td></tr>
<tr><td>第四行</td><td>第四行</td></tr>
<tr><td>第五行</td><td>第五行</td></tr>
<tr><td>第六行</td><td>第六行</td></tr>
</tbody>
</table>
</body>
</html>
javascript隔行換色
<html >
<head>
<script type="text/javascript">
window.onload = function(){ //頁面所有元素加載完畢
var item = document.getElementById("tb"); //獲取id為tb的元素(table)
var tbody = item.getElementsByTagName("tbody")[0]; //獲取表格的第一個tbody元素
var trs = tbody.getElementsByTagName("tr"); //獲取tbody元素下的所有tr元素
for(var i=0;i < trs.length;i++){//循環tr元素
if(i%2==0){ //取模. (取余數.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
trs[i].style.backgroundColor = "#888"; // 改變 符合條件的tr元素 的背景色.
}else {
trs[i].style.backgroundColor = "red";
}
}
}
</script>
</head>
<body>
<table id="tb">
<tbody>
<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
<tr><td>第三行</td><td>第三行</td></tr>
<tr><td>第四行</td><td>第四行</td></tr>
<tr><td>第五行</td><td>第五行</td></tr>
<tr><td>第六行</td><td>第六行</td></tr>
</tbody>
</table>
</body>
</html>
jquery得到checkbox值
<html>
<head>
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){// dom元素加載完畢
$('#btn').click(function(){ //獲取id為btn的元素,給它添加onclick事件
var items = $("input[name='check']:checked");
//獲取name為check的一組元素,然后選取它們中選中(checked)的。
// alert( "選中的個數為："+items.length )
items.each(function(){
alert($(this).val());
});
})
})
</script>
</head>
<body>
<input type="checkbox" value="1" name="check" checked/>
<input type="checkbox" value="2" name="check" />
<input type="checkbox" value="3" name="check" checked/>
<input type="button" value="測試選中的個數" id="btn"/>
</body>
</html>
$('ul li:gt(5):not(:last)') :
選取ul元素下的li元素的索引值大于5的集合元素后，去掉集合元素中的最后一個。
索引值從0開始。