前端：处理特殊标签CheckBox

最新推荐文章于 2025-06-28 14:45:55 发布

qq_41767337

最新推荐文章于 2025-06-28 14:45:55 发布

阅读量789

点赞数

CC 4.0 BY-SA版权

分类专栏：测开

本文链接：https://blog.youkuaiyun.com/qq_41767337/article/details/89573399

测开专栏收录该内容

67 篇文章

订阅专栏

本文介绍了如何在前端获取和回写复选框（checkbox）的值。通过遍历name为'codeType'的复选框，利用:checked判断选中状态。在回写页面时，根据传入的HTML值，设置相应复选框为选中状态，利用attr()方法修改checked属性。

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

获取复选框值

<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
<input type="checkbox" name="codeType" value="java">java
<input type="checkbox" name="codeType" value="python">python
<input type="checkbox" name="codeType" value="HTML">HTML

<input type="button" style="width: 100px" height="100px" value="设置值" onclick="getCheckBox()"/>

<script type="text/javascript">

function getCheckBox() {
    $("input[name='codeType']").each(function (index,value) {
        if($(value).is(":checked")){
            console.info($(value).val());
        }
    })
}
</script>

复选框类型checkbox，name相同codeType
标签选择器所以不用#，“input”，如何确定是复选框，name=codeType，遍历该复选框，each回调方法，第一个参数是下标，第二个参数是值，打印值是被选中的复选框；用 .is(":checked")

回写页面动态设置值

<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
<input type="checkbox" name="codeType" value="java">java
<input type="checkbox" name="codeType" value="python">python
<input type="checkbox" name="codeType" value="HTML">HTML

<input type="button" style="width: 100px" height="100px" value="设置值" onclick="setCheckBox('HTML')"/>

<script type="text/javascript">

 function setCheckBox(value) {
 $("input[name='codeType'][value='"+value+"']").attr("checked",true);
 }

</script>

复选框类型checkbox，name相同codeType
按钮点击调用setCheckBox方法，并且传参HTML；setCheckBox设置一个参数
使用标签选择器，所以input不加#，复选框name='codeType并且value等于入参的value，将该复选框设置为选中状态
[][]是并且的意思，设置checked（选中）为true
attr()方法：设置返回被选元素的属性值
在页面直接点击设置值，HTML选项被设置成功