javascript之 checkbox操作

最新推荐文章于 2024-11-06 13:48:22 发布
转载 最新推荐文章于 2024-11-06 13:48:22 发布 · 724 阅读 · 0

本文介绍了如何使用JavaScript操作网页上的复选框，包括全选、反选和获取选中项的功能实现。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Javascript之checkbox的操作</title>

<script type="text/javascript">

/*

  全选指定name的checkbox

*/

function selectAll(name)

{var cb=document.getElementsByName(name);

for(var i=0;i<cb.length;i++)

{cb[i].checked=true;}

}

/*

反选指定name的checkbox*/

function selectNoAll(name)

{var cb=document.getElementsByName(name);

for(var i=0;i<cb.length;i++)

{if(cb[i].checked==true) cb[i].checked=false;

else cb[i].checked=true;

}}

/*全否指定name的checkbox*/

function selectNo(name)

{var cb=document.getElementsByName(name);

for(var i=0;i<cb.length;i++)

{cb[i].checked=false;}}

/*获得选中的checkbox的值*/

function getInfo(name)

{var cb=document.getElementsByName(name);

var msg="";

for(var i=0;i<cb.length;i++)

{if(cb[i].checked){msg+=cb[i].nextSibling.nodeValue;}}

if(msg=="")

{alert('请选择一项');}

else{alert('您选中的信息为:'+msg);}}

</script>

</head>

<body>

<table width="600px">

<tr>

<td align="left">

<input type="checkbox" id="cb1" name="cbName" value="nuojiya" />诺基亚  

<input type="checkbox" id="cb2" name="cbName" value="motuoluola"  />摩托罗拉  

<input type="checkbox" id="cb3" name="cbName" value="pingguo" />苹果  

<input type="checkbox" id="cb4" name="cbName" value="sanxing"  />三星  

<input type="checkbox" id="cb5" name="cbName" value="suoai"  />索爱

</td></tr>

<tr><td align="left"><input type="button" id="btyes" name="btNameYes" value="全选" onclick="selectAll('cbName')" /> 

<input type="button" id="btno" name="btNameNo" value="全否" onclick="selectNo('cbName')" /> 

<input type="button" id="btnoAll" name="btNameNoAll" value="反选" onclick="selectNoAll('cbName')" /> 

<input type="button" id="getinfo" onclick="getInfo('cbName')" value="点击获得选中的信息" />

</td></table>

</body>

</html>

JS操作checkBox
weixin_33858336的博客
09-12 117
代码如下: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;mce:style&gt;&lt;!-- --&gt;&lt;/mce:
[javascript基础控件操作]--checkbox操作
xiagezhao的专栏
08-23 664
radio和checkbox都没有onchange事件,可以用onclick和自定义函数来代替.但是checkbox 有 onpropertychange事件,因此可以用onpropertychange来实现 is选择 的触发.checkbox的基本操作:1.选中操作 --->checkbox自带事件处理函数 onpropertychange2.全选操作 --->selectAll();详细说明:
JavaScript之checkbox选择
toypipi
09-02 591
本文内容来自《15. 尚硅谷佟刚_JavaScript DOM编程实验之Select级联选择》视频教程，版权归期所有，仅作记录以备后查。效果如下： 源代码如下：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title
使用js操作checkbox
热门推荐
fengzhen8023
07-31 3万+
我们在项目中经常会遇到这个问题：使用js判断checkbox框是否被选中以及使用js对checkbox进行操作。 其实这些需求很简单，这里给出使用原生js和jQuery来完成这些需求。 一.使用原生JavaScript判断是否选中checkbox框 &amp;lt;input type=&quot;checkbox&quot; id=&quot;test&quot; class=&quot;test&quot;&amp
javascript 选中的checkbox
大洋
03-17 881
&amp;amp;lt;script&amp;amp;gt; //方法1 $(&amp;quot;#b1&amp;quot;).click(function(){ //$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked') //意思是选择被选中的checkbox $.each($('in...
javascript中checkbox使用方法实例演示
10-23
本文将通过实例演示如何在JavaScript中操作checkbox，包括实现全选、部分选和反选（全不选）等操作。通过本文的学习，读者可以掌握在JavaScript中对checkbox进行基本的增删改查操作，并能结合jQuery库提高开发效率。...
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
10-29
总的来说，解决IE7中JavaScript操作Checkbox的`checked=true`不打勾的问题，关键在于理解DOM操作的顺序和浏览器的差异性。通过调整代码逻辑，确保元素在DOM中的正确位置再进行属性设置，可以有效地避免此类兼容性...
javascript中checkbox使用方法简单实例演示
10-23
本文将详细解释如何使用JavaScript操作checkbox，以及相关实例的演示。 ### 1. checkbox的基本使用方法 在HTML中，创建一个checkbox只需要使用`<input>`标签并设置其`type`属性为`checkbox`。为了区分属于同一组的...
javascript获得CheckBoxList选中的数量
10-29
首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。在本例中，我们使用jQuery的选择器来获取选中的复选框的数量。jQuery的选择器允许我们根据各种条件来选择元素。以下是一个...
javascript动态添加checkbox复选框的方法
11-22
本文将深入探讨如何使用JavaScript动态添加`checkbox`（复选框）元素，以及如何结合文本节点实现更丰富的展示效果。 首先，创建一个`checkbox`的基本步骤如下： ```javascript var oCheckbox = document....
JavaScript操作checkbox复选框
蜗牛学习笔记
03-20 1万+
JavaScript操作checkbox的方式和操作radio的方式相似，都是利用元素项的checked属性来完成。先获取checkbox元素集合，遍历集合，对集合中的每一项做操作。 这里讲几个常用的checkbox复选框的常见示例。
js中关于checkbox的一些操作
qq_45844443的博客
10-21 1678
s根据字符串与checkbox的value值一样进行选中代码 代码 var fieldStrValue="a,b,c,d,e,f,g"; //带有逗号的字符串 var names = fieldStrValue.split(","); //获取的字符串转换为数组 var inputs = document.getElementsByClassName('checkbox-list'); //获取class为'checkbox-list'的input框 for (var i = 0; i < in
js中设置checkbox的设置
qq_35872777的博客
01-29 1953
页面实例： &lt;div style='overflow-x: auto;'&gt;          &lt;table cellspacing="0" cellpadding="0" border="1" class="table" &gt;              &lt;thead&gt;              &lt;th &gt;      
[导入]ASP常用函数:CheckBoxScript()
weixin_34378922的博客
02-23 87
<%'功能:用来在指定CheckBox的哪几个值上打勾'来源:http://jorkin.reallydo.com/article.asp?id=465Function CheckBoxScript(ByVal FormElement , ByVal ElementValue)CheckBoxScript = "<scr" & "ipt language=""javas...
使用 JavaScript 选中/取消选中复选框
最新发布
HuntsBot的博客
11-06 1342
如何使用 JavaScript 选中/取消选中复选框？
JavaScript复选框的使用
syy的博客
10-30 3698
js复选框的使用
Vue 67 ，JavaScript 31 ，JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
04-02 3094
⭐在JavaScript中，实现全选和反选，通常是通过操作DOM元素和事件监听来实现。全选功能，当用户点击一个“全选”复选框时，页面中所有具有相同类名的复选框都将被选中。反选功能，用户点击一个“反选”复选框时，已选中的将变为未选中，未选中的将变为选中。这里分别使用原生JS和Vue实现，简单分享。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值