checkbox复选框使用及选定事件

最新推荐文章于 2025-06-18 13:54:21 发布

原创最新推荐文章于 2025-06-18 13:54:21 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #checkbox

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了HTML中checkbox复选框的使用方法，包括如何创建、设置初始状态，以及如何处理选定事件。结合JavaScript，讲解了如何监听和响应用户对复选框的选择变化，以实现动态交互效果。

html代码

<tr >
                                  <td style="background:#eee">权限</td>
                                    <td colspan="8" >
                                    	<label style="width:20%;border:0"><input type="checkbox" name="ckb" id="is_browser"/>浏览</label>
                                    	<label style="width:20%;border:0"><input type="checkbox" name="ckb" id="is_oper"/>操作</label>
                                    	<label style="width:20%;border:0"><input type="checkbox" name="ckb" id="is_data_update"/>修改</label>
                                    	<label style="width:20%;border:0"><input type="checkbox" name="ckb" id="is_debug"/>调试</label>
                                    	</td>
                                    </tr>
                                    <tr >

web效果

$("input[id='is_browser']").is(':checked')//复选框选定判断
$("[name='ckb']:checkbox:checked").length//获取选中的复选框个数
document.getElementById("is_browser").checked = false;//此方法设置复选框为未选中状态