技术标签： checkbox反选 input checkbox 全选/反选 HTML/JavaScript checkbox全选
全选和反选(仅供参考)
注:请忽略我的排版O(∩_∩)O哈哈~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选/反选</title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<style type="text/css">
html,body{ height: 100%; padding: 0; margin: 0; }
#div{ width: 100%;height: 100%; }
.xh{ width: 10%; float: left; }
.sj{ width: 50%;float: left; }
.tealgin{ text-align: center; }
</style>
</head>
<body>
<div id="div">
<div>
<div class="xh">
<input type="checkbox" id="checkId" onclick="check(this.id,'uncheckId')"/>全选/
<input type="checkbox" id="uncheckId" onclick="uncheck(this.id,'checkId')"/>反选
</div>
<div class="sj">标题</div>
</div>
<div style="clear: both;">
<div class="xh tealgin">
<input type="checkbox" name="ids" value="1"/>
</div>
<div class="sj">1</div>
</div>
<div style="clear: both;">
<div class="xh tealgin">
<input type="checkbox" name="ids" value="2"/>
</div>
<div class="sj">2</div>
</div>
<div style="clear: both;">
<div class="xh tealgin">
<input type="checkbox" name="ids" value="3"/>
</div>
<div class="sj">3</div>
</div>
<div style="clear: both;">
<div class="xh tealgin">
<input type="checkbox" name="ids" value="4"/>
</div>
<div class="sj">4</div>
</div>
<div style="clear: both;">
<div class="xh tealgin">
<input type="checkbox" name="ids" value="5"/>
</div>
<div class="sj">5</div>
</div>
<div style="clear: both;">
<div class="xh tealgin">
<input type="checkbox" name="ids" value="6"/>
</div>
<div class="sj">6</div>
</div>
<div style="clear: both;">
<div class="xh tealgin">
<input type="checkbox" name="ids" value="7"/>
</div>
<div class="sj">7</div>
</div>
</div>
<script type="text/javascript">
function check(id,uncheck){
var checkboxId = document.getElementById(id);
var uncheckboxId = document.getElementById(uncheck);
uncheckboxId.checked = false;
var selectList = $("input[name='ids']");
if(checkboxId.checked==true){
for(var i = 0;i<selectList.length;i++){
if(selectList[i].type=="checkbox" ){
selectList[i].checked= true;
}
}
}else{
for(var i=0 ; i < selectList.length; i++){
if(selectList[i].type=="checkbox" ){
selectList[i].checked= false;
}
}
}
}
function uncheck(id,check){
var uncheckboxId = document.getElementById(id);
var checkboxId = document.getElementById(check);
checkboxId.checked = false;
var unSelectList = $("input[name='ids']");
for (var i = 0;i < unSelectList.length;i++) {
if(unSelectList[i].checked == false){
unSelectList[i].checked = true;
}else{
unSelectList[i].checked = false;
}
}
}
$(function(){
$("input[name='ids']").change(function(){
var total = $("input[name='ids']");console.info(total.length)
var checkboxId = document.getElementById("checkId");
var checkedNum = $("input[name='ids']:checked");console.info(checkedNum.length)
if(total.length > checkedNum.length){
if(checkboxId.checked==true){
checkboxId.checked = false;
}
}else{
if(checkboxId.checked==false){
checkboxId.checked = true;
}
}
});
});
</script>
</body>
</html>
文章浏览阅读190次。在学习集合代码时发现在Iterable接口中使用了default关键字。default关键字介绍default是在java8中引入的关键字，也可称为Virtualextension methods——虚拟扩展方法。是指，在接口内部包含了一些默认的方法实现（也就是接口中可以包含方法体，这打破了Java之前版本对接口的语法限制），从而使得接口在进行扩展的时候，不会破坏与接口相关的实现类代码。为什么要有这个特性？首先，之前的接口是个双刃剑，好处是面向抽象而不是面向具体编程，缺陷是，当需要修改接口时候，需_default uhotkey
文章浏览阅读878次，点赞19次，收藏20次。随着社会经济的快速发展与人口的持续增长，城市生活垃圾的产生量日益增多，垃圾处理问题成为摆在各大城市面前的一大难题。传统的混合收集、集中填埋或焚烧的处理方式不仅耗费大量的土地资源，而且容易造成环境污染和资源的浪费。垃圾分类作为解决这一问题的有效手段，通过将生活垃圾按照其性质分为可回收物、有害垃圾、湿垃圾（厨余垃圾）和干垃圾等类别进行分别处理，可以显著提高资源的回收利用率，减少对环境的污染。然而，由于公众环保意识的不足、分类系统的不完善以及相关设施的缺乏，导致垃圾分类工作难以有效推行。
文章浏览阅读189次。你可以按回车键使用默认的值，或按照需求指定分区的大小，可以根据p显示的分区表，选择上一个分区的end+1作为分区的start，大小计算一般是 1G = (1 * 1024 * 1024 * 1024) / 512，也可以选择使用**+1G**，end输入数值或者+1G都可。可以看到已经挂载的mmcblk0p1占未挂载的mmcblk0的7.2G（未挂载29.8-7.2G）在创建新分区后，你可以使用以下命令重新加载分区表，使新分区生效。根据提示输入分区类型，通常选择主分区（输入。接下来要输入命令自定义分区。_fdisk新建分区挂载
文章浏览阅读1k次，点赞23次，收藏24次。这是一个ai副业赚钱资讯信息的大合集，将在全网搜索并整理ai副业赚钱的相关方法、技术、工具、以及一些可以赚钱的平台和渠道。期望能在AI时代，打破信息茧房，让大家都能在这个时代利用AI智能化做副业，赚取工作之余的额外收益。
文章浏览阅读1k次。穿越火线几次体验良好的游戏优化方案。_cf优化
文章浏览阅读452次。蓝桥杯python部分题目和答案分享（个人做法）易懂（4） [十题]第三十一题：寻找2020，第三十二题：杨辉三角形，第三十三题：叶节点数，第三十四题：音节判断，第三十五题：预测身高，第三十六题：约数个数，第三十七题：求最大质因数（分解），第三十八题：饮料换购，第三十九题：刷题统计（统计刷题多少天完成），第四十题：天干地支_蓝桥杯python往届考题及答案
文章浏览阅读3.5k次。记录：323场景：在CentOS 7.9操作系统上，使用rpm命令安装、卸载、查看软件包。_rpm命令
文章浏览阅读2.1w次，点赞2次，收藏30次。删除相关的安装sudo apt-get --purge remove postgresql\*删除配置及文相关件sudo rm -r /etc/postgresql/sudo rm -r /etc/postgresql-common/sudo rm -r /var/lib/postgresql/删除用户和所在组sudo userdel -r postgressudo groupdel_ubuntu22.04 卸载postgresql
文章浏览阅读2.6k次。Ubuntu16.04系统下Caffe环境搭建的坑之import caffe 报错：AttributeError: ‘numpy.ufunc’ object has no attribute ‘module’这个错误是numpy版本不兼容的原因。我之前安装的是numpy1.1.6,一直报上面的错。然后找了几十篇博客才发现是numpy版本的原因。我建议安装numpy1.11.0。解决步骤：1...._object has no attribute 'module
文章浏览阅读181次。Java多线程和四种线程实现方式_java多线程复习
文章浏览阅读1.4w次，点赞2次，收藏3次。本案例最后一个步骤时补齐JS代码，经过反复测试 ，插件的引入和使用需要在 DOM 对象之后，代码如下。_滚动加载 python flask
文章浏览阅读1.5k次，点赞14次，收藏14次。项目成功建立后，关闭IDEA，再次打开项目，发现项目的目录结构视图“莫名消失”？如图所示。_idea 视图选不了项目了