【问题标题】:Removing from array values of checkboxes in jQuery从jQuery中复选框的数组值中删除
【发布时间】:2016-07-19 10:35:04
【问题描述】:

我有一个这样的复选框:

while($userRow=$resultForUsers->fetch_assoc()){
      $nameOfUser=$userRow['users_name'];
      $userId=$userRow['user_facebook_id'];
      $userFBPicture=$userRow['users_picture'];
      echo "
      <tr class='tr-data-users'>
      <td class='text-center'>
      <input type='checkbox' class='checkbox' onclick='if(this.checked){selo(this.value)}else{izbaci(this.value)}' value=$userId>
      </td>

因此,对于我数据库中的每个用户,我都有一个带有其 id 值的复选框。我需要一个数组中所有已检查用户(即复选框)的 id。我是这样做的:

<input type='checkbox' class='checkbox' onclick='if(this.checked){put(this.value)}else{remove(this.value)}' value=$userId>
 var  niz={};
    var index=0;
        function put(o){
            niz[index++]=o;
            console.log(niz);
        }

所以,console.log 现在显示所有选中复选框的 ID。我想要做的是,如果未选中复选框,则从数组中删除该 id(即 chechbox 值)。我试过这样:

onclick='if(this.checked){put(this.value)}else{remove(this.value)}'
 var  niz={};
    var index=0;
        function put(o){
            niz[index++]=o;
            console.log(niz);
            remove(o,niz);
        }

        function remove(o,niz){
            if($.inArray(o,niz)){
                console.log('radim');
                var indexNiza= $.inArray(o,niz);
               niz= $.grep(niz,function(a,o){
                   return (a!=o);
               });
            }
        }   

如您所见,else 部分应在未选中复选框并从数组中删除该 id 时处理,但它不起作用。非常感谢您对此的帮助。

【问题讨论】:

    标签: javascript jquery arrays checkbox


    【解决方案1】:

    您编写的代码似乎采用了一条非常复杂的路线来完成一项简单的工作。您可以查看以下示例,了解如何将所有值获取到它们自己的数组中,用于 checkedunchecked 状态。

    在演示中,如果用户更改任何复选框的状态,我会枚举选中和未选中的复选框,并将选中的值存储在名为 cbChecked 的数组中,未选中的值存储在 cbUnchecked

    这里的关键是使用的选择器:

    选择器用法

    获取所有“已检查”对象

    :checked
    

    获取所有“未选中”的对象

    :not(:checked)
    

    演示

    $(document).ready(function() {
      
      $("input[type='checkbox']").change(function() {
        var cbChecked = new Array();
        var cbUnchecked = new Array();
        $("input[type='checkbox']:checked").each(function() {
          cbChecked[cbChecked.length] = this.value;            
        });
        
        $("input[type='checkbox']:not(:checked)").each(function() {
          cbUnchecked[cbUnchecked.length] = this.value;            
        });
        
        $("p#cbChecked").html( cbChecked.join() );
        $("p#cbUnchecked").html( cbUnchecked.join() );
      
      });
      
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <h2> The checkbox form</h2>
    <form id="foo">
      <p>A : <input type="checkbox" id="a" value="a"></p>
      <p>B : <input type="checkbox" id="b" value="b"></p>
      <p>C : <input type="checkbox" id="c" value="c"></p>
      <p>D : <input type="checkbox" id="d" value="d"></p>
      <p>E : <input type="checkbox" id="e" value="e"></p>
      <p>F : <input type="checkbox" id="f" value="f"></p>
    </form>
    
    <h2>Checked Values</h2>
    <p id="cbChecked"></p>
    
    <h2>Unchecked Values</h2>
    <p id="cbUnchecked"></p>

    【讨论】:

    • 你做得很好。 :)
    猜你喜欢
    • 2021-10-12
    • 2014-12-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-11-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多