使用JavaScript实现checkbox复选

最新推荐文章于 2025-08-22 11:32:18 发布

weixin_30719711

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python java ViewUI

原文链接：http://www.cnblogs.com/jrmark/articles/1131742.html

本文介绍了一种使用JavaScript从表单中收集已选中复选框值的方法，并提供了具体的实现代码示例。

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

    这个问题在在管理信息系统中我们经常会遇到，我以前做的程序都是使用后台代码来获得用户的选择项，为了提高页面效率，使用JavaScript会更好一些。
    下面是javascript写的一个函数：

function btn_Check_onclick()

{

var myElement;

var numberOfControls=document.form1.length;

var compSpec="Your chosen language is ";

for(var i=0;i<numberOfControls;i++)

{

myElement=document.form1[i];

if(myElement.type=="checkbox")

{

if(myElement.checked==true)

{

compSpec+=myElement.value+" ";

}

alert(compSpec);

}

</script>

在页面上定义了三个checkbox控件，如下：

<html>

<head>

</head>

<body>

<div>

<h1>Please choice your language:</h1>

<br/>

<p>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Python</td>

</tr>

<tr>

</tr>

</table>

</p>

</div>

</form>

</body>

</html>

从中我们可以看出，btn_Check_onclick()的工作原理就是在“from”这个数组中逐个判断页面元素，是不是“checkbox”类型的，如果是，则进一步判断checkbox元素是否被选中。

转载于:https://www.cnblogs.com/jrmark/articles/1131742.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30719711

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

javascript 多级checkbox选择效果

10-29

多级checkbox选择效果,具体的效果可以看下面的图，有需要的朋友可以参考下。

JS实现checkbox全选功能

weixin_30920853的博客

03-13

135

　　在后台系统开发中，往往需要涉及对信息的批量操作，例如全选的checkbox；如图：　　　　选中一级页面前面的checkbox就会全选，JS实现如下： html代码： <input id="ckAll" type="checkbox" name="chkA"/>一级页面 <input name="chkChild" type="checkbox" ...

参与评论您还未登录，请先登录后发表或查看评论

javaScript实现checkbox多项选择

wjt276的专栏

08-21

157

[code="javaScript"] //全选或全部不选 function checkall() { var isChecked=(document.form1.checkAll.checked == true); var elements_all=document.form1.elements; for(i=0;i

js实现全选checkbox

weixin_33801856的博客

08-26

js代码 function selectAllCheckBox(parentid) { var PID = document.getElementById(parentid); var cb = PID.getElementsByTagName("input"); for(var i=0;i<cb.lengt...

javascript实现复选框单选多选！

anai2312的博客

08-15

362

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选、反选</title> </head> <body> <form> <input type="checkbo...

JavaScript操作checkbox复选框

热门推荐

人生若只如初见的博客

06-17

1万+

JavaScript操作checkbox的方式和操作radio的方式相似，都是利用元素项的checked属性来完成。先获取checkbox元素集合，遍历集合，对集合中的每一项做操作。取值 <body> <p> <label for="hobby">Hobby: <input type="checkbox" name="hobby" va...

JavaScript使checkbox复选框点击无效实现

qq_45876930的博客

03-10

3174

只要onclick是返回值是false即可 <input type="text" onclick="return false"> 也可这样 <input type="text" onclick="return 1==2"> 还可这样(JQuery) <input type="text" id="test" > $("#test").click(function(){ return false; }) ...

javascript实现checkbox复选框实例代码

11-29

首先，我们来关注复选框的美化操作。默认情况下，`checkbox`的样式由浏览器控制，样式单一且不够美观。通过CSS，我们可以自定义其外观。在提供的代码示例中，CSS类`.CheckBoxClass`被用来隐藏原始的`checkbox`，而`....

基于javascript实现checkbox复选框实例代码

10-22

本文详细介绍了如何使用JavaScript来实现复选框的相关功能，包括全选和反选。下面将从几个方面来具体阐述知识点。首先，复选框的基础使用方法非常简单。在HTML中，复选框的标签是`<input type="checkbox">`，通过`...

javascript获取checkbox复选框获取选中的选项

11-30

在JavaScript中，获取复选框（checkbox）选中的选项是一项常见的任务，特别是在处理表单数据时。本示例提供了一种纯JavaScript实现的方法，用于获取指定表单内复选框选中的值。以下是对该方法的详细解释：首先，...

JS多级联动下拉列表（自定义级数）

06-03

原生JS写的多级联动下拉列表，联动级数可以自定义，不限级数。可用作省、市、区联动，或其他的多级分类选择。使用方法请参考demo文件。

js 选取table中checkbox选中行的某一列

sunny_LI

05-09

3191

//获取选中的行的第七列值 var selectObj = []; $(function(){ $("#tabid").find(":checkbox:checked").each(function(){ var val = $(this).parent().next().next().next().next().next().next().text(); ...

js实现CheckBox单选多选全选功能

08-05

4721

js实现CheckBox单选多选全选功能在checkbox的使用中，我们经常遇到需要全选或者单选的情况，通过js定义函数可以方便实现需求，提高用户体验感。定义多个CheckBox <div> <input type="checkbox" id="all" @click="checkAll"> <label for="all">全选</label> <br><hr> <input id="chec

JavaScript实现复选框全选

weixin_46379561的博客

09-06

1152

复选框全选在JavaScript中，我们可以利用标签属性name可以重复的特性来实现批量修改name属性值相同的标签属性值。这是因为有着重复name属性的标签是使用一个数组来表示的，只需要获取到该数组，再对数组进行遍历，然后改变每一个数组元素的checked状态即可实现复选框全选。运行如图，当选中第一个全选的选项时，其它选项也会被选中；当取消选中时，其它选项也会一同取消选中。代码如下： <!DOCTYPE html> <html> <head> <me

css的white-space: pre

最新发布

qq_51035159的博客

08-22

153

简单来说，这个组件的核心就是让用户能够粘贴任何文本内容（特别是配置文件、JSON等），并且保证粘贴的内容格式完全不变，然后可以原样发送给后端处理。- white-space: pre ：这是最关键的CSS属性，确保所有空格、制表符、换行符都被保留。- 用户粘贴的内容会完整存储在 inputJson.value 中，包括所有格式字符。- 使用Vue3的 v-model="inputJson" 实现双向数据绑定。- wrap="off" ：防止浏览器自动换行，保持原始的行结构。- 聚焦时的视觉反馈。

react样式问题

qq_44136028的博客

08-22

181

React组件样式控制主要有三种方式：1）内联样式，通过style属性传递JavaScript对象，支持动态样式但需驼峰命名；2）CSS类名，使用className绑定静态样式；3）CSS-in-JS（如styled-components），将CSS嵌入JS生成带样式组件，支持动态主题切换。三种方式各具特点，内联样式适合简单动态样式，CSS类名适合静态样式，CSS-in-JS适合复杂组件化样式需求。

JavaScript基础语法five

2301_79744908的博客

08-21

298

本文介绍了JavaScript中对象的基本概念和使用方法。对象是一种无序的数据集合，由属性和方法组成，可以通过点语法或方括号访问属性。文章详细讲解了对象的增删改查操作、方法的定义与调用，以及使用for-in遍历对象的技巧。同时介绍了Math内置对象及其常用方法（如ceil、floor、round等），包括随机数生成公式和猜数字案例的实现。最后指出null属于object类型，并提供了生成N-M范围随机数的通用公式。

三十四、Vue3项目大屏之SCSS自适应适配屏幕方法

张先森的博客

08-19

383

其中 px2vw代表的是高度的适配，px2vh代表的是宽度的适配，我当时着急写反了，但是也可以用，px2vw(1) 大概有1px的大小，如果你先写好了px的标准的1920*1080的设计图，可以直接全局转换。哈喽，大家好，在上次第十五章给大家分享了大屏看板Less适配各种屏幕之后，发现大多数的css都是SCSS,那么今天给大家分享下SCSS的自适应屏幕的方法。底下是原先第十五张的less的适配方法。话不多说，直接上代码。

从入门到精通：Java设计模式——单例模式

m0_73590302的博客

08-21

803

本文先解析单例模式 “确保类仅一个实例、提供全局访问点” 的定义，及唯一性、自我实例化、全局访问三大特点，说明其节省资源、保数据一致性的作用。接着详解饿汉式、懒汉式（含线程安全与不安全）、双重检查锁、静态内部类、枚举 6 种实现方式，分析各方式代码、原理、优缺点，尤其聚焦懒汉式多线程安全问题与双重检查锁中 volatile 的作用。还介绍单例在日志记录器、配置管理器等场景的应用，对比优缺点，关联 Spring 框架中 Bean 的单例管理，最后总结要点并给出设计模式学习建议。

JavaScript实现对复选框checkbox的控制方法

根据给定文件信息，本文将详细介绍JavaScript（JS）如何控制复选框（checkbox）的相关知识点。复选框是网页表单中的常用元素，允许用户从一组选项中选择多个项目。JavaScript为操作复选框提供了灵活的控制方式，可以...