javascript 全選與全取消功能的實現(xiàn)代碼
更新時間:2012年12月23日 16:20:49 作者:
全選與全取消在工作過程中經(jīng)常會使用到,是因為它很方便,同時可以提高用戶體驗值,本文介紹如何使用javascript實現(xiàn)全選與全取消功能,需要了解的朋友可以參考下
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標(biāo)題文檔</title>
<script type="text/javascript" language="javascript">
function selectAll()
{
var allCheckBoxs = document.getElementsByName("coffee");
var desc = document.getElementById("like");
if(desc.value == "都喜歡")
{
desc.value = "都不喜歡";
for(var i = 0; i < allCheckBoxs.length; i ++ )
{
allCheckBoxs[i].checked = true;
}
}
else
{
desc.value = "都喜歡";
for(var i = 0; i < allCheckBoxs.length; i ++ )
{
allCheckBoxs[i].checked = false;
}
}
}
</script>
</head>
<body>
<p>你喜歡那種類型咖啡</p>
<form>
<input type="checkbox" name="coffee" value="cream">藍(lán)山咖啡<br>
<input type="checkbox" name="coffee" value="sugar" >摩卡<br>
<input type="checkbox" name="coffee" value="sugar">拿鐵<br>
<input type="checkbox" name="coffee" value="sugar">卡布奇諾<br>
<input type="checkbox" name="coffee" value="sugar">愛爾蘭咖啡<br>
<input type="button" id="like" value="都喜歡" onClick="selectAll()">
</form>
</body>
</html>
您可能感興趣的文章:
- 比較全的JS checkbox全選、取消全選、刪除功能代碼
- Javascript實現(xiàn)CheckBox的全選與取消全選的代碼
- js multiple全選與取消全選實現(xiàn)代碼
- js實現(xiàn)復(fù)選框的全選和取消全選效果
- javascript 全選/反選,取消選擇效果
- 基于JavaScript實現(xiàn)復(fù)選框的全選和取消全選
- CheckBox為CheckBoxList實現(xiàn)全選或全取消選擇(js代碼實現(xiàn))
- JS小功能(checkbox實現(xiàn)全選和全取消)實例代碼
- JS控件ASP.NET的treeview控件全選或者取消(示例代碼)
- JS實現(xiàn)表單全選以及取消全選實例
相關(guān)文章
javascript typeof id===''string''?document.getElementById(id
剛開始學(xué)習(xí)js的朋友可能會有些疑問,其實這段代碼使用js的三元運算符,這樣代碼看起來高大上,最主要是代碼段少2016-11-11js中g(shù)etBoundingClientRect( )方法案例詳解
這篇文章主要介紹了js中g(shù)etBoundingClientRect( )方法案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07javascript中call,apply,bind的用法對比分析
這篇文章主要給大家對比分析了javascript中call,apply,bind三個函數(shù)的用法,非常的詳細(xì),這里推薦給小伙伴們。2015-02-02