JQery实现全选，反选，全不选批量删除

青旅半醒 2023-06-09 12:26 28阅读 0赞

**JQuery的代码实例**

$(function(){
    		//全选、全不选的操作
    		$("#all").click(function(){
    			if(this.checked){
    				$("input[name='ids']").prop("checked",true);
    			}else{
    				$("input[name='ids']").prop("checked",false);
    			}
    		});
    		//反选的操作
    		$("#reverse").click(function(){
    			$("input[name='ids']").each(function(){
    				$(this).prop("checked",!$(this).prop("checked"));
    			});
    		});
    	});

** html段落的实例**

**每次点击会执行事件**

<tr>
    	<td colspan="10">
    		<input type="submit" value="删除">
    		<input type="checkbox" name="all" id="all">全选/全不选
    		<input type="checkbox" name="reverse" id="reverse">反选
    	</td>
    </tr>
    <tr v-for="(site,key) in sites">
    	<td>
    		<input type="checkbox" name="ids">
    	</td>
    	<td>{
       {key+1}}</td>
    	<td>{
       {site.phone}}</td>
     	<td>{
       {site.name}}</td>
    	<td>{
       {site.cname}}</td>
    	<td>{
       {site.sex}}</td>
    	<td>{
       {site.address}}</td>
    	<td>{
       {site.hobby}}</td>
    	<td>{
       {site.code}}</td>
    	<td>
    		<button @click="del(site.id,key)">删除</button>
    		<button @click="edit(site.id)">修改</button>
    	</td>
    </tr>

发表评论取消回复

表情：

评论列表（有 0 条评论，28人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQery实现全选，反选，全不选批量删除

JQuery的代码实例 $(function(){ //全选、全不选的操作 $("all").click(function(){

青旅半醒/ 2023年06月09日 12:26/ 0 赞/ 29 阅读

相关 JavaScript实现全选、全不选、反选功能

效果图 ![20191011213342751.gif][] 代码部分： <!DOCTYPE html> <html> <head>

矫情吗；*/ 2023年06月06日 12:25/ 0 赞/ 83 阅读

相关 jQuery实现全选、反选、全不选效果

jQuery实现全选、反选、全不选效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt

柔光的暖阳◎/ 2022年09月18日 05:00/ 0 赞/ 387 阅读

相关 jQurey全选，反选，不全选功能实现

html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选，反选，不全选</t

╰+哭是因爲堅強的太久メ/ 2022年08月21日 10:53/ 0 赞/ 386 阅读

相关 yii框架全选反选批量删除

<?php namespace app\\controllers; use Yii; use yii\\filters\\AccessControl;

太过爱你忘了你带给我的痛/ 2022年07月15日 00:37/ 0 赞/ 305 阅读

相关 Dom 全选全不选反选

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

桃扇骨/ 2022年06月11日 00:06/ 0 赞/ 403 阅读

相关 js全选/全不选/反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

迷南。/ 2022年05月13日 10:08/ 0 赞/ 424 阅读

相关关于全选、反选，批量删除

全选/反选 //全选/反选 function checkOpposite() { //获取所有复选框name属性值为check将其存入数组

╰半夏微凉°/ 2022年04月03日 09:56/ 0 赞/ 292 阅读

相关 jQuery实现全选/反选和批量删除

//全选/全不选 $(function()\{ //初始化时候,删除按钮隐藏 $("input\[name='Delete'").css("display",'non

朱雀/ 2022年01月12日 06:11/ 0 赞/ 503 阅读

相关全选-反选-全不选

简单易懂，上手快 $(function() \{ //全选 $("\all").click(function()

绝地灬酷狼/ 2021年10月03日 02:48/ 0 赞/ 705 阅读