Html css jq 组合制作全选与全不选

一、需要制作效果;

要求:点击选择,选择1 选择2全部选中,只点击选择1或选择2 全选不选中,选择1,选择2同时选中时,全选选中;

添加 删除一行标签;

编辑里面内容(以张三、李四为例)

二、Html部分:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" href="css/com.css">                                                   //引入css

<title>练习课</title>

</head>

<h1>全选</h1>

<div class="tab">

<div class="trs">

<div class="tds"><input type="checkbox" id="qx">全选</div>

<div class="tds">姓名</div>

<div class="tds">操作</div>

</div>

<div class="trs">

<div class="tds"><input type="checkbox" class="xz">选择1</div>

<div class="tds a1">张三</div>

<div class="tds"><button class="del">删除</div>

</div>

<div class="trs">

<div class="tds"><input type="checkbox" class="xz">选择2</div>

<div class="tds a1">李四</div>

<div class="tds"><button class="del">删除</div>

</div>

</div>

<button id="add">添加</button>

</body>

<script src="js/jquery-3.4.1.js"></script>                                        //引入js库

<script src="js/comm.js"></script>                                                 //引入自己写的js

</html>

三、css 部分

.trs:after{

display: block;

content: ‘ ‘;

clear: both;

}

.tds{

float: left;

width: 100px;

height: 30px;

line-height: 30px;

border: 1px solid #000;

text-align: center;

}

.a1 input{

width: 100%;

height: 25px;

line-height: 25px;

}

#add{

width: 55px;

height: 25px;

}

四、js部分

$("#qx").click(function(){

var iso=$(this).is(":checked") //点击之后状态

if(iso){

$(".xz").prop("checked",true)

}else{

$(".xz").prop("checked",false)

}

})

$("body").on("click",".xz",function(){

//记录被选中个数

var ij=$(".xz").length

var count=0

for(i=0;i<ij;i++){

if($(".xz").eq(i).is(":checked")){//判断下面的是否全部选中  需借助上面的变量count

count++;

};

}

//下面判断是否被选中;

if(count == ij){

$("#qx").prop("checked",true);

}else{

$("#qx").prop("checked",false);

}

})

// 添加一行

$("#add").click(function(){

$(".tab").append(‘<div class="trs"><div class="tds"><input type="checkbox" class="xz">选择</div><div class="tds">张三</div><div class="tds"><button class="del">删除</div>‘)       //不要有空格

});

//删除一行

$("body").on("click",".del",function(){

$(this).parents(".trs").remove();

});

//编辑(以张三、李四为例)

$(‘body‘).on(‘click‘,‘.a1‘,function(){

var text = $(this).text();

$(this).html(‘<input type="text" value=‘+text+‘>‘);

$(this).children().focus();

});

$(‘body‘).on(‘click‘,‘.a1 input‘,function(){

return false;

});

$(‘body‘).on(‘blur‘,‘.a1 input‘,function(){

var val = $(this).val();

$(this).parent().text(val);

});

一部分人喜欢把 css文件写到Html中, 效果都一样 欢迎各位大神指点,评论;

原文地址:https://www.cnblogs.com/lxc127136/p/12075309.html

时间: 2024-10-10 05:07:59

Html css jq 组合制作全选与全不选的相关文章

JQ——选择器的应用(表格的隔行换色、全选和全不选)

1.表格的隔行换色: (1)核心代码: <script> $(function(){ $("tbody tr:even").css("background-color","red"); $("tbody tr:odd").css("background-color","yellowgreen"); }); </script> 获取tbody中的元素,并对奇数行和偶

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu

原生js实现的复选框的全选和全不选效果

原生js实现的复选框的全选和全不选效果:使用jquery实现复选框的全选和全部选效果非常的简单,这里就不介绍了,具体可以参阅jQuery实现的checkbox复选框全选和全不选效果一章节,下面介绍一下如何使用原生javascript实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" conten

jQuery 表单应用:全选/取消全选,表单验证,网页选项卡切换

应用一:单行文本框应用 需要用到的 API focus([[data],fn])   --> 当元素获得焦点时,触发 focus 事件 blur([[data],fn])     --> 当元素失去焦点时,触发 blur 事件 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></ti

bootgrid修改成可以全勾选和全取消勾选操作

1. 引言 由于项目需要,需要在不同页面上选择全勾选能全部勾选所有的记录,反勾选也如此.这个需求可以解决了一个样例:如果有150条记录,当前页就10条,你又在每一个页面勾选部分的记录,然后,如果你要全部全选,需要在每一个页面上勾上全选checkbox,全部反选也有这个问题. 2.修改的代码 基于jQuery Bootgrid v1.3.1这个版本. bootgrid.js修改的部分如下: //原有的select和deselect方法 /** * Selects rows by ids. Sele

【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" /> <script type=&qu

关于checkbox全选与全不选遇到的问题

HTML: <div class="outbox"> <label for="box">全选</label> <input type="checkbox" id="box"/> </div> <div class="outbox2"> <label for="box1">选项1</label>

【特效】复选框的全选、全不选、反选操作

顾名思义. 朴素效果截图: html: <div class="con"> <h1>复选框的全选.全不选.反选操作</h1> <div class="box"> <h2>全选/全不选:</h2> <p><input type="checkbox" class="check_kid"> 选项一</p> <p>&