checkbox的全选、反选、多选等操作(js)

以下控件的name属性为DEPT_ID 
(案例中默认选中的checkbox,全选或者反选,对该控件无影响)
//1.全选

function selectAllRight(){

$("input[name=‘DEPT_ID‘").each(function() {

$(this).prop("checked", true);

});

}

//2.反选
function reverseSelectRight(){
    $("input[name=‘DEPT_ID‘").each(function() {  
    //若当前选项没被选中,则设置为选中
    if(false == $(this).is(‘:checked‘)){
        $(this).prop("checked", true);
    }else{
    //若当前选项选中,但是不是为disabled的话,则设置为取消选中
    if(false == $(this).prop("disabled")){
        $(this).prop("checked", false);
    }}}); }

//3.进行选择控制,当且仅当只允许选择一个。
$("input[name=‘DEPT_ID‘]").click(function() {
$("input[name=‘DEPT_ID‘").each(function() {              
//若当前当前不为disable,并且被选中,则取消选中            
if(true ==$(this).is(‘:checked‘)){            
if(true == $(this).prop("disabled")){
    $(this).prop("checked", true);
}else{
    $(this).prop("checked", false);
}}});
//当前设置选中状态
    $(this).prop("checked", true);
});

//4.重置
function abandonSelectRight(){
    //获取所有被选中的部门
        $("input[name=‘DEPT_ID‘").each(function() {  
    //若当前选项没被选中,则设置为选中
    if(true == $(this).is(‘:checked‘)){
    //若当前选项选中,但是不是为disabled的话,则设置为取消选中
    if(false == $(this).prop("disabled")){
        $(this).prop("checked", false);
    }}
    });
}

控件:
<label><input name="DEPT_ID" type="checkbox" value="100100" />控件1 </label>

<label><input name="DEPT_ID" type="checkbox" value="100100" />控件2 </label>

<label><input name="DEPT_ID" type="checkbox" value="100100" />控件3 </label>

时间: 2024-10-08 21:19:57

checkbox的全选、反选、多选等操作(js)的相关文章

checkbox全选 反选 不选 并获取id的值

$("#lblContents :checkbox").each(function () {                 if (this.checked) {                     this.checked = false;                     ids ="";                 }                 else {                     this.checked = true;

复选框 全选 反选 不选

<script language="javascript"> var put=document.all.tags("input"); //全选function selall(){for (i=0;i<put.length;i++){   if (put[i].type=="checkbox")    put[i].checked=true;}} //不选function Nselall(){for (i=0;i<put.l

js制作全选 反选 不选

<!DOCTYPE html><html >    <head>        <meta charset="utf-8">        <title></title>    </head>    <style>        </style>        <script>    window.onload=function (){        var aBtn

5.17批量修改样式,全选反选不选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0 auto; padding: 0; } .btn{ width: 200px; height: 60px; background-color: #002752; color:w

input -多选 反选 不选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 1000px; height: 200px; background-color: lavender; box-shadow: 5px 5px 2px lightblue; }

jQuery全选/反选checkbox

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content=""> <meta name="Author" content=""> <meta name="Keywords&

利用jQuery实现CheckBox全选/全不选/反选

转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%>   <!DOCTYPE

dView实现checkbox全选反选(自带的ShowSelectCheckBOx)并获取选中checkbox对应的值集合

第一步,显示checkbox按钮: 点击AspxGridView的columns,你可以直接选择增加一行Command Column或者随便选择一种然后点击Change To Commadn Column;默认的ShowSelectCheckBOx是true,我们可以不用管,这样你就看到每行都有checkBox按钮了. 第二步,表头部显示CheckBox,点击实现全选|反选功能: 我们切换回源代码,找到AspxGridView的GridViewCommandColumn列,在该列中增加 <Hea

ASPxGridView实现checkbox全选反选(自带的ShowSelectCheckBOx)并获取选中checkbox对应的值集合

第一步,显示checkbox按钮: 点击AspxGridView的columns,你可以直接选择增加一行Command Column或者随便选择一种然后点击Change To Commadn Column;默认的ShowSelectCheckBOx是true,我们可以不用管,这样你就看到每行都有checkBox按钮了. 第二步,表头部显示CheckBox,点击实现全选|反选功能: 我们切换回源代码,找到AspxGridView的GridViewCommandColumn列,在该列中增加 <Hea