全选、全部选、反选操作的实现（JS）

最新推荐文章于 2021-06-19 00:28:22 发布
最新推荐文章于 2021-06-19 00:28:22 发布
阅读量827 收藏
点赞数
分类专栏： 经验分享 JS的学习 文章标签： input button function javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/krenyelang/article/details/6897394
版权
<html>
<head>
<title>歌曲选择的实现</title>
<script language="javascript" type="text/javascript">
function selAll()
{
var playlist=document.getElementById("divlist");
var inputs=playlist.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
var inp=inputs[i];
if(inp.type=="checkbox"){
inp.checked="checked";
}
}
}
function none()
{
///全不选
var playlist=document.getElementById("divlist");
var inputs=playlist.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
var inp=inputs[i];
if(inp.type=="checkbox"){
inp.checked="";
}
}
}
///反选操作;
function f()
{
var playlist=document.getElementById("divlist");
var inputs=playlist.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){

var inp=inputs[i];
if(inp.type=="checkbox"){
// if(inp.checked==true){
// inp.checked=" ";
// }
// else{

//inp.checked="checked";
//}
inp.checked=!inp.checked;
}
}
}
</script>
</head>
<body>
<div id="divlist">
<input type="checkbox" id="p1" ><label for="p1">伤心太平洋</label>
<input type="checkbox" id="p2"><label for="p2">兄弟</label>
<input type="checkbox" id="p3"><label for="p3">有梦的人</label>
<br>
<input type="button" value="全选" οnclick="selAll();"><input type="button" οnclick="none();" value="全不选"><input type="button" value="反选" οnclick="f()">
</div>
</body>
</html>
krenyelang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【JS】全选、不选、反选复选框（模板）
LZGS_4的专栏
06-19 1177
今天和大家分享一个全选、不选、反选复选框的例子，这个例子可以当做是一个模板使用，只要把一些数据适当改变以下就OK啦。 这是效果图： 代码如下： HTML部分：
简单js实现全选全部选反选效果
11-11
以上就是使用JavaScript实现全选和反选功能的基本方法。在实际应用中，可能还需要考虑更多细节，如处理异步加载的数据、兼容不同浏览器等。通过不断学习和实践，你可以熟练掌握这些技巧，提高网页的交互性和用户体验...
全选反选
weixin_30648963的博客
07-27 74
———————————————————————————————— <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").click(function(){ $('[name=items]:checkbox').attr('checked', t...
大家好！，今天介绍一个简单实现全选全不选的方法，希望能对你有帮助！之前的代码有点小问题，今天才发现，已改正。...
banzhiyou5506的博客
08-17 176
2019-08-17 要求：1.点击全选按钮时，所有的单击按钮全部被选中；取消时，单击按钮全部被取消。2.全选按钮选中时，取消任何一个单击选项按钮时，全选按钮取消选中。3.所有的单击按钮都选中时，全选按钮自动选中。 <!DOCTYPE html> <html> <head> <meta charset="...
html5 制作 视频 播放 列表,HTML 5视频或音频播放列表
weixin_36367702的博客
06-19 1247
我并不满足于被提供了，所以这里是我的建议，使用jQuery：Sorry, this browser doesn't support HTML 5.0var folder = "audio";var playlist = ["example1.mp3","example2.mp3"];for (var i in playlist) {jQuery('#playlist ul').append(''+...
39、（案例）全选，全不选
qq_37917691的博客
05-05 109
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选 <br/> <input type="check...
使用Audio API中的playlist来做一个音乐播放器
Elastic 中国社区官方博客
05-27 3012
在最新的QtMultiMedia 5.6中，Audio API中有一个playlist属性．我们可以充分利用这个属性来做一个简单的音乐播放器．在我们的官方文档中，写的是QttMultiMedia 5.4．正确的是5.6版本．Audio API可以让我们很方便地播放我们所需要的音乐．在我们之前的文章＂如何在Ubuntu QML应用中播放音乐＂也讨论过如何利用MediaPlayer及SoundEffect来播放音乐
JS实现全选反选全不选
06-18
JS实现全选反选全不选
JS实现的全选、全不选及反选功能【案例】
10-17
总结来说，实现JS的全选、全不选和反选功能的关键在于理解DOM操作、事件监听以及属性的动态修改。通过这些基础概念，我们可以轻松地处理用户交互，提高网站或应用程序的用户体验。在实际开发中，这种功能广泛应用于...
vue2.0在table中实现全选和反选的示例代码
08-28
在 `home.vue` 文件中，我们可以看到使用 JavaScript 实现全选和反选的逻辑，并使用 `v-on` 指令来绑定事件。 本示例代码展示了 Vue 2.0 中实现 Table 全选和反选的示例代码，并介绍了相关的知识点，包括使用 Vue ...
Js实现复选框的全选、全不选反选功能代码实例
10-15
在网页开发中，经常需要实现复选框（checkbox）的全选、全不选以及反选功能，以便用户能够方便地批量操作。本篇将详细讲解如何使用JavaScript（Js）实现这一功能，并提供一个具体的代码实例。 首先，我们需要了解复...
利用JS实现为数字添加千分位的操作
野狼的专栏
10-22 6211
function comdify(n) { var re=/\d{1,3}(?=(\d{3})+$)/g; var n1=n.replace(/^(\d+)((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,"$&,")+s2;}); return n1; } <input type="text" value="12121
JavaScript的一些小实例
野狼的专栏
10-13 3458
当我们把鼠标放到某一个超链接上面时，显示其相关信息；曾今我也很想实现这样的效果，总感觉很洋盘……这段时间学习在JS，感觉还可以，不像自己才开始学习编程时那么的困难；下面是我对这一效果的实现（只是实现了当鼠标放上去时的效果，并没有写当鼠标离开的状态。）： 层超链接操作 language="javascript" type="text/javascript"> //实现的功能是：当用户将
利用JS进行省市选择的实现
野狼的专栏
10-22 2369
省市 var data={"四川":["成都","巴中"],"重庆":["永川","万州"]}; function loadProv() { ///遍历省 var prov=document.getElementById("prov"); for(var key in data){ var option=document.createElement("option"); opt
找感觉的第一个小程序
野狼的专栏
03-18 1046
将近一个季度没有接触.NET了，现在接触，感觉心里还是有点模糊，不知道如何下手；许多东西貌似都快忘记了，趁着下午没有事写了会程序，原本很多东西都忘记了，但是在写程序的过程中，我重拾了那些遗忘的，虽然速度没有以前那样，但是，我坚信没有什么做不到，只要我坚持；现在，也是该收心的时候了，我不能再那样模糊的生活着，我想要什么，那么我就要努力去实现，而不是这样的消极的过着；我必须重拾以前的自己，每天都有自己
C#操作Excel的学习
野狼的专栏
12-12 703
之前一直在寻思着要学习用C#来操作Officel，但一直都没有时间学习，前两天终于对其有了一个初步的了解。    或许在我们没有接触之前用感觉有多么的难，其实，任何一件事情只要你下定决心去做的时候就会变得非常的容易。 下面是我对该模块学习的一个简单总结：             当然我是通过使用NPOI来操作的，因此，第一件事就是添加NPOI的相关引用，不然就没法操作（当然别的方法也可以实现
防止用户进行一些特别的操作
野狼的专栏
11-09 547
作为IT人，有时候会总做一些不该做的事情；回想有一次，我在进行评论操作的时候输入了一小段JS代码，但结果却让我有点意外，并没有达到我预期的效果，他将其当做一般字符处理了；当时我就在想他是怎样实现的这样一个功能！现在我弄明白了；首先、.NET在这方面预先就设置了操作，因此不可以进行这样的操作；其次，通过后台代码来实现；下面是我的一点小分析：    首先是.NET内置：ASP.NET页面中的默认操作
值得思考的一些问题
野狼的专栏
10-24 480
作为一个程序员，总是希望自己的程序是非常精简，效率执行非常高；但是，慢慢的就会出现一个问题：在日常生活中做一些事情的时候，总是希望用尽量少的时间去做好，并且同时还要保证最终的质量。时间长了，我们的生活节奏似乎要比一般人节奏要快许多！     就拿这次做毕业设计来说，从老师将作业布置下来开始，我就希望用最短的时间完成，而且制定了严格的执行计划；但是，最后执行的时候却不是那么的顺利！在规定的时间内很
js实现复选框全选反选
最新发布
04-09
可以使用以下Javascript代码实现复选框全选反选： 全选： ``` function selectAll(){ var checkboxes = document.getElementsByName("checkbox"); for(var i=0;i;i++){ checkboxes[i].checked = true; } } ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值