Question

我需要从一组复选框中选中已选中和未选中的复选框。我已经完成了一半的工作，但我无法将已选中和未选中的复选框分开。请帮帮我。

下面的示例包含合并按钮。单击合并按钮时。它必须与已选中和未选中的复选框分开。

$('document').ready( function() {
         var b = $('#hid').val();
                 for (var i=0; i<b; i++) {
    var data ="<li><input type='checkbox' id='"+i+"'>Example"+i+"</li>";
                   $('#aa').append(data);
                   //$('td').css({'border-right':'1px solid red', ''});
                   $('.checklist').append(data);
              }  

                //var a = $('input[type="checkbox"]').length;
                //$('input[type="checkbox"]').attr("checked");
                //if ($(this).is(':checked')) {

                //}


/* for (j=0; j<a; j++)
                {
                        var che = $("input[type=checkbox]:checked").length;
                        alert (che);
                        if(che > 3))
                        {
                                alert ('this is 2');
                        } else {
                                alert('you clicked more than four');
                        }
                }*/


                $('#mer').click( function() {
                 var che = $('input[type="checkbox"]:checked').filter(":checked").length;
                 //alert($('input[type="checkbox"]:checked').filter(":not(:checked)").length);
   $('input[type="checkbox"]:checked').attr('disabled', true);  

                });


/*  
   for (var j=0; j<=b; j++) {
                 function isEven(j) {
           if (j%2 == 0)
             alert(j);
                          return true;
             else
               return false;
          }  
                 }
*/  


/* $(function() {
          $('input[type="checkbox"]').bind('click',function() {  
                          if($('input[type="checkbox"]:checked').length == 2) {
                                 $(':checked').attr('disabled', true);
               }
          });
        });  
*/



});
</script>
<style type="text/css">
.wrapper {
 width:900px;
 height:auto;
 margin:0 auto;
}
.checklist {
 margin:0px;
 padding:0px;
}
 ul.checklist {
 margin:0px;
 padding:0px;
}
 ul.checklist li {
 list-style-type:none;
}
.dull {
        color:#ccc;
}

</style>
</head>
<body>
<div class="wrapper">
<input type="hidden" name="no. of checkbox" value="15" id="hid"/>
<ul class="checklist">
</ul>
<input type="button" value="merge" id="mer" />
</div>
</body>
</html>

Answer 1

也许是这样的：

var unchecked = [];
var checked = [];
jQuery.each($('input[type="checkbox"]'), function() {
    if (this.checked) {
        checked.push(this);
    }
    else {
        unchecked.push(this);
    }
});

Answer 2

您可以选择选中：

$(":checkbox:checked")

未经核实：

$(":checkbox:not(:checked)")

希望这会有所帮助。干杯

Answer 3

$('#mer').click( function() {
  var checked = [];
  var unchecked = [];  
  $('input[type="checkbox"]').each(function(){
    if( this.checked ){
      checked.push(this);
    }else{
      unchecked.push(this);
    }
  });
});

Answer 4

我不确定你想要完成什么。根据您的评论，我觉得您需要这样的内容（将div.wrapper替换为我的body并在div.wrapper结束前添加 jQuery 代码：

HTML代码（<div class="wrapper"> <form action="#" method="get" accept-charset="utf-8"> <ul class="checkboxes"> <li><label for="chk_1">chk_1</label> <input type="checkbox" name="chk1" value="" id="chk_1"> </li> <li><label for="chk_2">chk_2</label> <input type="checkbox" name="chk2" value="" id="chk_2"> </li> <li><label for="chk_3">chk_3</label> <input type="checkbox" name="chk3" value="" id="chk_3"> </li> <li><label for="chk_4">chk_4</label> <input type="checkbox" name="chk4" value="" id="chk_4"> </li> <li><label for="chk_5">chk_5</label> <input type="checkbox" name="chk5" value="" id="chk_5"> </li> <li><label for="chk_6">chk_6</label> <input type="checkbox" name="chk6" value="" id="chk_6"> </li> </ul> <input type="button" value="merge" id="mer" /> </form>）：

<script type="text/javascript" charset="utf-8">
$('document').ready( function() {
    $('#mer').click( function() {
        var checked = $(':checkbox:checked').parents("li").remove();
        checked.insertBefore($(".checkboxes li:first"));
    });
});
</script>

jQuery代码：

{{1}}

我需要将已选中和未选中的复选框分开。请任何人帮助我

4 个答案: