checkbox 如何判断选定和赋值

最新推荐文章于 2022-05-29 11:28:41 发布

一招鲜@Q

最新推荐文章于 2022-05-29 11:28:41 发布

阅读量1.5k

点赞数 1

分类专栏： JS 文章标签： checkbox js jQuery

本文链接：https://blog.csdn.net/qq_30715329/article/details/79310505

版权

JS 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用JQuery和原生JavaScript来检查和设置HTML中的Checkbox状态。通过具体的示例代码，展示了如何判断一个复选框是否被选中以及如何通过编程方式设置其选中状态。

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

<body>
    <p>你喜欢喝神马？</p>
    <input id="checkboxC" name="test" type="checkbox" value="Coffee" >Coffee
    <input id="checkboxT" name="test" type="checkbox" value="Tea" >Tea
</body>

JQuery 和 Js 判断的语法都不一样。我们可以对比看看。

先引入JQuery：

//读者也可以下载到本地，src 填 jquery 的路径; 这里是jquery的官方引用地址
<script src="http://code.jquery.com/jquery-latest.js"></script>

JQuery:

.is(':checked')

$("input[type='checkbox']:first").is(':checked');   //判断是否选定coffee

或

$("#checkboxC").is(':checked');

JS:

document.getElementById("checkboxC").checked;

默认选中

加入checked="checked"

<input id="checkboxC" name="test" type="checkbox" value="Coffee" checked="checked">Coffee

赋值

.prop('属性名' , 属性值 )

或

.attr('属性名' , '属性值' )

$("input[type='checkbox']:last").prop('checked',true); //这样也能选中

 $("input[name='test']:last").attr('checked',true);