项目中全选和反选

author author     2022-08-12     420

关键词:

<script type="text/javascript">
//页面加载
//获取onclick对象,并绑定onclick时间
//将所有的checkbox打钩
window.onload = function(){
//获取name的值等于anniu的元素
alert(1);
var input_obj = document.getElementsByName("anniu");
//这里anniu元素是一个集合,将它的长度赋值给input——obj——len;
var input_obj_len= input_obj.length;
document.getElementById("select").onclick = function()
{

for(i=0;i<input_obj_len;i++)
{
input_obj[i].checked="checked";
}
var $arr = input_obj.val();

}
document.getElementById("reselect").onclick = function()
{
for(i=0;i<input_obj_len;i++)
{
input_obj[i].checked=false;
}
}
}
</script>

function checkBox(obj){

var input = document.getElementsByName("id[]");
var length = input.length;
if(obj.checked==true){
for(i=0;i<=length;i++){
input[i].checked = true;
}
}else{
for(i=0;i<=length;i++){
input[i].checked = false;
}
}
}
// 导出excel
$("#excel").click(function(){
$id = document.getElementsByName(‘id[]‘);
$arr = new Array;
for($i=0;$i<$id.length;$i++){
if($id[$i].checked){
$arr += $id[$i].value+‘,‘;
}
}

 

jsreact全选和反选

onCheckAll=(data)=>{ varCheckBox=document.getElementsByName(data); for(leti=0;i<CheckBox.length;i++){if(CheckBox[i].checked==true){CheckBox[i].checked=false;}else{CheckBox[i].checked=true}}; } 查看详情

delphi实现dbgrid全选和反选功能

  Delphi实现Dbgrid全选和反选、清除全选的功能,不管是在Delphi下,还是在WEB开发中,这种功能都是很实用的,是进行数据批量操作的基础。本模块就是实现了为Delphi的DBGrid数据列表增加全选内容、清除全选的功能,很实用... 查看详情

checkbox之全选和反选

先导入jquery组件<inputtype="checkbox"id="checkall">全选<inputtype="checkbox"id="checkrev">反选<inputtype="checkbox"name="check1">1<inputtype="checkbox"name="check1">2<script>$(fun 查看详情

全选和反选

1<!DOCTYPEhtml>2<html>3<headlang="en">4<metacharset="UTF-8">5<title></title>6</head>7<style>8ul{9list-style:none;10}11</style>12<script>13wi 查看详情

delphidbgrid记录全选和反选拖动处理

DBGrid1.DragMode  :=  dmManual;//留意这个设置不要变procedureApplicationEvents1Message(varMsg:tagMSG;varHandled:Boolean);procedureTForm18.ApplicationEvents1Message(varMsg:tagMSG;varHandled:B 查看详情

vue中的全选和反选

<template><div><inputtype=‘checkbox‘class=‘input-checkbox‘v-model=‘checked‘v-on:click=‘checkedAll‘>全选<templatev-for=‘checkbincheckboxData‘><inputtype=‘checkbox‘name=‘checkbo 查看详情

vue2.0在table中实现全选和反选

...bsp; 其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选     小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的,js是小颖... 查看详情

vue.js实现checkbox的全选和反选

摘要:    1、监听全选的值的变化,来改变checbox的数组值    2、监听选中checkbox的数组值的变化,当某一项checkbox有变化,判断是否checkbox的数值长度是否和列表数据的长度一致,来改变全选的值。&nb... 查看详情

jquery实现全选和反选功能

...设置"checked"属性的值,true未选中,false为未选中,在整个全选、反选过程中注意处理全选复选框的选中状态,以及获取选中选项的值。<ulid="list"><li><label><inputtype="checkbox"value="1">1.我是记录来的呢</la 查看详情

jquery版的全选,全不选和反选

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <scriptsrc="js/jquery.js"type="text/javascript"charset="utf-8"></script> <title></title> </head& 查看详情

实现全选和反选的效果代码

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>全选</title><style>#allinspan{display:inline-block;width:150px;margin-top:10px;font-size:18px;tex 查看详情

jquery案例二:实现全选全不选和反选(代码片段)

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>全选和全不选以及反选</title><scriptsrc="../js/jquery-1.8.3.js"></script><script>$(function()//全选事件$(" 查看详情

js实现复选框的全选全部选和反选

1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>checkbox</title>6<styletype="text/css">7.main{8width:400px;9height:400px;10margin:20pxauto 查看详情

多选框checkbox全选全不选和反选

在判断多选框中的某一个是否被选中时,我们可以用checked的属性选中了就返回true,没被选中就返回false;这是html代码:<formaction="#"><labelfor="hobby">爱好:</label><labelfor="hobby1"><inputtype="checkbox"name="hobby"id="hobby1 查看详情

原生js实现全选和反选以及任意一个未被选中的效果

模仿一个百度音乐的全选和反选的的操作。html代码如下:<divclass="box"><ulid="lists"><li><inputtype="checkbox"value=""><span>我爱你中国</span></li><li><inputtype="checkbox"value=""& 查看详情

vue实现单选、全选和反选

...,每个checkbox被选中时,它的value会被添加到这个数组。全选框通过v-model绑定到一个计算属性(checkAll),这个属性必须实现了getter和setter方法,当model数组长度等于fruits长度,返回true,表示全选。改变checkbox的值时会触发setter方法... 查看详情

angularjs全选功能实现

最近在做的一个项目要增加全选和反选功能,之前只做过JQ版的全选和反选。实现效果:1.点击全选checkbox可以切换全选和全部清空2.点击列表中的checkbox,当全部选中时全选选中3.在全选状态下点击列表中的checkbox将其置为非选中... 查看详情

javascript内容梳理示例之模态对话框示例之全选和反选以及取消示例之后台管理左侧菜单

  1<!DOCTYPEhtml>2<!--示例之模态对话框-->3<htmllang="en">4<head>5<metacharset="UTF-8">6<title>Title</title>7<style>8.hide{9display:none;10}11.c1{12pos 查看详情