实现全选效果

最新推荐文章于 2023-10-23 15:44:26 发布

菜鸟下山

最新推荐文章于 2023-10-23 15:44:26 发布

阅读量368

点赞数

文章标签： HTML

本文链接：https://blog.youkuaiyun.com/huzijia888/article/details/78636670

版权

这是一个使用HTML和JavaScript实现全选效果的示例。通过点击全选按钮，可以将购物清单中的所有选项设置为选中或取消选中状态。示例包括了HTML结构和JavaScript函数te1，用于处理全选事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>

<style>
#gouwu{
width:100px;
}
</style>
<script>
function te1(event){
var quan=event.target;//选择触发事件的元素
var sale=document.getElementsByName("sale");//获取选择表
var i=0;
if(quan.checked==true){//判断全选是否被选择
for(i=0;i<sale.length;i++){
sale[i].checked=true;//全部设置为选中
}
}
else{
for(i=0;i<sale.length;i++){
sale[i].checked=false;//全部设置为不选中
}
}
}
</script>
<meta charset="UTF-8">
</head>
<body>
<fieldset id="gouwu">
<legend>购物清单</legend>
<p><input type="checkbox" name="sale" value="香烟">香烟</p>
<p><input type="checkbox" name="sale" value="啤酒">啤酒</p>
<p><input type="checkbox" name="sale" value="蛋糕">蛋糕</p>
<p><input type="checkbox" name="sale" value="香料">香料</p>
</fieldset>
<p><input type="checkbox" name="quanxuan" value="quanxuan" οnclick="te1(event)">全选</p>
</body>
</html>