全选反选 - 走看看

zoukankan html css js c++ java

全选反选
————————————————————————————————

<script type="text/javascript">

$(function(){

//全选

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

   $('[name=items]:checkbox').attr('checked', true);

});

//全不选

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

   $('[type=checkbox]:checkbox').attr('checked', false);

});

//反选

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

  $('[name=items]:checkbox').each(function(){

//此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。

//$(this).attr("checked", !$(this).attr("checked"));

//直接使用JS原生代码，简单实用

this.checked=!this.checked;

  });

});

//输出值

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

var str="你选中的是： ";

$('[name=items]:checkbox:checked').each(function(){

str+=$(this).val()+" ";

})

alert(str);

});

})

</script>

</head>

<body>

<form method="post" action="">

你爱好的运动是？

<br/>

<input type="checkbox" name="items" value="足球"/>足球

<input type="checkbox" name="items" value="篮球"/>篮球

<input type="checkbox" name="items" value="羽毛球"/>羽毛球

<input type="checkbox" name="items" value="乒乓球"/>乒乓球

<br/>

<input type="button" id="CheckedAll" value="全　选"/>

<input type="button" id="CheckedNo" value="全不选"/>

<input type="button" id="CheckedRev" value="反　选"/>

<input type="button" id="send" value="提　交"/>

</form>

————————————————————————————————————

<script>

$(function(){

//全选

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

if(this.checked){ //如果当前点击的多选框被选中

$('input[type=checkbox][name=items]').attr("checked", true );

}else{

   $('input[type=checkbox][name=items]').attr("checked", false );

}

});

$('input[type=checkbox][name=items]').click(function(){

   var flag=true;

$('input[type=checkbox][name=items]').each(function(){

if(!this.checked){

flag = false;

}

   });

   if( flag ){

$('#CheckedAll').attr('checked', true );

   }else{

$('#CheckedAll').attr('checked', false );

   }

});

  //输出值

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

var str="你选中的是： ";

$('input[type=checkbox][name=items]:checked').each(function(){

str+=$(this).val()+" ";

})

alert(str);

});

})

</script>

</head>

<body>

<form>

你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<br/>

<input type="checkbox" name="items" value="足球"/>足球

<input type="checkbox" name="items" value="篮球"/>篮球

<input type="checkbox" name="items" value="羽毛球"/>羽毛球

<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>

<input type="button" id="send" value="提　交"/>

</form>

——————————————————————

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

</head>

<body>

<table class="table table-bordered table-hover definewidth m10">

<thead>

<tr>

<th></th>

<th>广告名称</th>

<th>图片</th>

<th>文字描述</th>

<th>类别</th>

   <th>添加日期</th>

   <th>开始日期</th>

   <th>结束日期</th>

   <th>状态</th>

<th>操作</th>

</tr>

</thead>

<tbody id="result_"><tr><td width="20px"><input type="checkbox" name="checkAll[]" onclick="setSelectAll();" value="16"></td><td><a href="#">ttyyyy</a></td><td><img src="http://www.bootstrap_admin.com//data/upload/ad/147868286816985.png" width="150" height="90"></td><td></td><td>图片广告</td><td>2014-06-13 11:02</td><td>暂无</td><td>暂无</td><td>开启</td><td><a href="http://www.bootstrap_admin.com/index.php/ad/edit.shtml?id=16" class="icon-edit" title="编辑广告ttyyyy"></a>  </td></tr>

<tr><td width="20px"><input type="checkbox" name="checkAll[]" onclick="setSelectAll();" value="16"></td><td><a href="#">ttyyyy</a></td><td><img src="http://www.bootstrap_admin.com//data/upload/ad/147868286816985.png" width="150" height="90"></td><td></td><td>图片广告</td><td>2014-06-13 11:02</td><td>暂无</td><td>暂无</td><td>开启</td><td><a href="http://www.bootstrap_admin.com/index.php/ad/edit.shtml?id=16" class="icon-edit" title="编辑广告ttyyyy"></a>  </td></tr>

<tr><td width="20px"><input type="checkbox" name="checkAll[]" onclick="setSelectAll();" value="16"></td><td><a href="#">ttyyyy</a></td><td><img src="http://www.bootstrap_admin.com//data/upload/ad/147868286816985.png" width="150" height="90"></td><td></td><td>图片广告</td><td>2014-06-13 11:02</td><td>暂无</td><td>暂无</td><td>开启</td><td><a href="http://www.bootstrap_admin.com/index.php/ad/edit.shtml?id=16" class="icon-edit" title="编辑广告ttyyyy"></a>  </td></tr>

</tbody>

<tbody><tr>

<td colspan="11">

全选<input type="checkbox" id="selAll" onclick="selectAll()">

反选:<input type="checkbox" id="inverse" onclick="inverse();">

<button class="button button-small" type="button" onclick="del()">

<i class="icon-remove"></i>

删除

</button>

<button class="button button-small" type="button" onclick="change_status(0)">

<i class="icon-off"></i>

设为禁用

</button>

<button class="button button-small" type="button" onclick="change_status(1)">

<i class="icon-eye-open"></i>

设为开启

</button>

</td>

</tr>

</tbody></table>

</body>

</html>

<script type="text/javascript">

function selectAll()

{

var obj = document.getElementsByName("checkAll[]");

if(document.getElementById("selAll").checked == false)

{

for(var i=0; i<obj.length; i++)

{

obj[i].checked=false;

}

}else

{

for(var i=0; i<obj.length; i++)

{

obj[i].checked=true;

}

}

}

//当选中所有的时候，全选按钮会勾上

function setSelectAll()

{

var obj=document.getElementsByName("checkAll[]");

var count = obj.length;

var selectCount = 0;

for(var i = 0; i < count; i++)

{

if(obj[i].checked == true)

{

selectCount++;

}

}

if(count == selectCount)

{

document.all.selAll.checked = true;

}

else

{

document.all.selAll.checked = false;

}

}

//反选按钮

function inverse() {

var checkboxs=document.getElementsByName("checkAll[]");

for (var i=0;i<checkboxs.length;i++) {

  var e=checkboxs[i];

  e.checked=!e.checked;

  setSelectAll();

}

}

</script>

————————————————————————————
function checkuid() {
var ids='';
$("input[name='message_group_id[]']:checked").each(function(i, n){
ids += $(n).val() + ',';
});
if(ids=='') {
window.top.art.dialog({content:"<?php echo L('before_select_operation')?>",lock:true,'200',height:'50',time:1.5},function(){});
return false;
} else {
myform.submit();
}
}

————————————

//全选
$(".group").each(function(){
$(this).on("click",function(){
var id = $(this).attr('id');
var checked = !!$(this).attr("checked");
$("."+id).attr('checked',checked);
})
});
//单选某一个互动全选
$("input[name='right[]']").on("change",function(){
var group = $(this).attr("class");
var flag = true;
$("."+group).each(function(){
var checked = !!$(this).attr("checked");
if(!checked){
flag = false;
return;
}
})
$("#"+group).attr('checked',flag);
});
//设置全选按钮状态
$(".group").each(function(){
var id = $(this).attr('id');
var flag = true;
$("."+id).each(function(){
var checked = !!$(this).attr("checked");
if(!checked){
flag = false;
return;
}
});
$(this).attr('checked',flag);
});
查看全文

相关阅读:
从尾到头打印链表-Python
上台阶三种实现（斐波那契数列）-Python
Windows/Linux安装python2.7，pycharm和pandas——《利用Python进行数据分析》
部署（Django ）
第一个Django模型
 第一个Django Project（创建一个简单的博客）
几个算法基础
 回文序列—Palindrome
学习笔记：CentOS7学习之二十：shell脚本的基础
 学习笔记：CentOS7学习之十七： Linux计划任务与日志的管理

原文地址：https://www.cnblogs.com/csjoz/p/7243869.html