javascript 全选与全取消功能的实现_javascript all取消-优快云博客

本文链接：https://blog.youkuaiyun.com/yangzhanghui/article/details/6518644

本文介绍了一个简单的网页应用案例，通过一个按钮实现对页面中多个复选框选项的全选与全不选功能。该功能利用JavaScript来控制用户界面上咖啡种类的选择状态，并同步更新按钮的文字提示。

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</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">蓝山咖啡<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>