Checkbox复选框的那些事儿

最新推荐文章于 2021-02-23 14:52:11 发布

落落叶叶无声

最新推荐文章于 2021-02-23 14:52:11 发布

阅读量370

点赞数

分类专栏： HTML & CSS 文章标签： checkbox

本文链接：https://blog.csdn.net/u012557814/article/details/76670446

版权

HTML & CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

关于checkbox复选框

要使checkbox选中，我们都知道加checked属性。
选中可以是

<input type="checkbox" checked/>
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="true"/>

最近做项目时发现，checked属性随便接受什么值（包括”false”和”“），都是选中状态，

<input type="checkbox" checked="随便什么值都可以"/>

伴随之便产生疑问，那要设置checkbox为非选中状态，应该怎么办？

其实，input checkbox标签的checked有两种状态，分别是true和false
只要checked有值，javascript就返回true
什么时候返回false呢？
不加checked属性,这种情况下便返回false

<input type="checkbox"/>

使用JS设置checkbox为非选中状态

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<input type="checkbox" id="cb" checked/>
<a href="javascript:uncheckByPureJS()">By Pure JS</a>
<a href="javascript:uncheckByJquery()">By JQuery</a>
</body>
<script type="text/javascript">
    function uncheckByPureJS(){
        var cb = document.getElementById("cb");
        cb.checked = false;
    }

    function uncheckByJquery(){
        $('#cb').attr('checked', false);
    }
</script>
</html>

通过后台变量设置界面Checkbox的checked状态（JSP写法）

<c:choose>
    <c:when test="${status}">
        <input type="checkbox" checked="true"/>
    </c:when>
    <c:otherwise>
        <input type="checkbox"/>
    </c:otherwise>
</c:choose>

落落叶叶无声

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Checkbox复选框的那些事儿

关于checkbox复选框要使checkbox选中，我们都知道加checked属性。选中可以是最近做项目时发现，checked属性随便接受什么值（包括”false”和”“），都是选中状态，伴随之便产生疑问，那要设置checkbox为非选中状态，应该怎么办？其实，input checkbox标签的checked有两种状态，分别是true和false 只要checked有值
复制链接

扫一扫

专栏目录