代码之家 › 专栏 › 技术社区 › Prem

使用Jquery选中多个复选框

ternary-operator checkbox jquery javascript

Prem · 技术社区 · 9 年前

在我的应用程序中,我使用一个复选框来“全选”其他复选框。下面是我的代码片段,它对我很有用。但我需要一个更短的方法来减少代码行。

$('#CheckAll').change(function(){   
                if ($(this).is(":checked")) {                                       
                    $('.checkboxes').each(function(){                                   
                        $(this).prop("checked", true);                      
                    });
                }
                else{               
                    $('.checkboxes').each(function(){                                   
                        $(this).prop("checked", false);                                                 
                    });             
                }               
            });

使用“三元运算符”是否有更简单的方法来实现这一点。

5 回复 | 直到 9 年前

Manoj Dhiman 9 年前

试试这个 demo

$("#CheckAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});

ááºáá 9 年前

如果你 真正地 要使用三元运算符( fiddle ):

$('#CheckAll').change(function () {
    ($(this).is(":checked") ? $('.checkboxes').prop("checked", true) :    $('.checkboxes').prop("checked", false))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' id='CheckAll'> Check all
<br><br>
<input type='checkbox' class='checkboxes'>
<input type='checkbox' class='checkboxes'>
<input type='checkbox' class='checkboxes'>
<input type='checkbox' class='checkboxes'>

但是,您可以通过使用选择器(取消)选中复选框来缩短它:

$('#CheckAll').change(function() {
  if ($(this).is(":checked")) {
    $('.checkboxes').prop("checked", true);
  } else {
    $('.checkboxes').prop("checked", false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' id='CheckAll'>Check all
<br>
<br>
<input type='checkbox' class='checkboxes'>
<input type='checkbox' class='checkboxes'>
<input type='checkbox' class='checkboxes'>
<input type='checkbox' class='checkboxes'>

Vijay Verma 9 年前

使用此项:

   $('#CheckAll').change(function(){   
                    if ($(this).is(":checked")) {                                       
                        $('.checkboxes').prop("checked", true);                      

                    }
                    else{               
                        $('.checkboxes').prop("checked", false);                                                        
                    }               
                });

user2575725 user2575725 9 年前

试试看:

  var chks = $('.checkboxes'); // cache all once
  $('#CheckAll').change(function(e) {
    chks.prop('checked', this.checked);
  });

rekaszeru 9 年前

$('#CheckAll').change(function(){
    $('.checkboxes').prop("checked",$(this).prop("checked"));
});