大家在好多购物网站买东西的时候购物车常常有一个功能就是全选和全不选的功
能,那么这个功能用javascript是怎么实现的呢,其实呢很简单,接下来道哥就
来给大家分享一下这个小功能。
HTML代码块如下
<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>
javascript代码如下
<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>
效果截图