如何用复选框jQuery替换数组中的值

Posted 2023-05-09

【中文标题】如何用复选框jQuery替换数组中的值

【英文标题】：How to replace an value in an array with checkboxes jQuery

【发布时间】：2017-01-10 12:54:18

【问题描述】：

我正在尝试使用 jQuery 排列一个复选框数组。我已经设法将值按顺序添加到数组中并删除正确的值，但是对于我的一生，我无法让它用新选择的值替换删除的值。目前它只是将新值添加到数组的末尾。

到目前为止，这是我的代码：

var array = [];
        $('input[type="checkbox"]').click(function () 
            if ($(this).attr('checked')) 
                // Add the new element if checked:
                array.push($(this).attr('value'));
                $('#ff_elem512').val(array);
            
            else 
                // Remove the element if unchecked:
                for (var i = 0; i < array.length; i++) 
                    if (array[i] == $(this).attr('value')) 
                        array.splice(i, 1);
                        $('#ff_elem512').val(array);
                    
                
            

            console.log(array);
        );

提前致谢

【问题讨论】：

你的 html 是什么样的？ $('#ff_elem512') 是什么？

您是否尝试将 $(this).attr('checked') 替换为 $(this).prop('checked')？

@Winter $('#ff_elem512') 是我发送数组的输入

@SylvainB 不，我现在没有生病尝试 - 尝试代码工作，因为它没有替换值

【参考方案1】：

使用 Jquery 是函数而不是像下面这样的 attr

var array = [];
    $('input[type="checkbox"]').click(function () 
        if ($(this).is('checked')) 
            // Add the new element if checked:
            array.push($(this).attr('value'));
            $('#ff_elem512').val(array);
        
        else 
            // Remove the element if unchecked:
            for (var i = 0; i < array.length; i++) 
                if (array[i] == $(this).attr('value')) 
                    array.splice(i, 1);
                    $('#ff_elem512').val(array);
                
            
        

        console.log(array);
    );

【参考方案2】：

var array = [];
$('input[type="checkbox"]').change(function() 
      if ($(this).prop('checked')) 
        // Add the new element if checked:
        if (array.indexOf($(this).val()) < 0) 
            array.push($(this).val());
           
         else 
          // Remove the element if unchecked:
          if (array.indexOf($(this).val()) >= 0) 
              array.splice(array.indexOf($(this).val()), 1);
            
        
        $('#ff_elem512').val(array.join(", "));
        console.log(array);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" />One
<input type="checkbox" value="2" />Two
<input type="checkbox" value="3" />Three
<input type="checkbox" value="4" />Four
<input type="checkbox" value="5" />Five
<br />
<input type="text" id="ff_elem512" />

【讨论】：

我需要它来删除一个值，然后在与旧值相同的位置添加一个新值

【参考方案3】：

当您单击某个复选框时，您始终可以设置您的数组，如下所示：

$('input[type="checkbox"]').click(function () 
  array = [];
  $("input[type=checkbox]:checked").each( function () 
    array.push($(this).val());
  );
  console.log(array);
);

这是一个小提琴：https://jsfiddle.net/9ssyxvv2/

更新：如果您想保留点击顺序，请改用：

 $('input[type="checkbox"]').click(function () 
    var elem=$(this);
      if (this.checked) 
        array.push($(this).val())
     else 
        array = array.filter(function(x)
            return x != $(elem).val() );
    
    console.log(array);
);

【讨论】：

感谢您的解决方案。但是选中的复选框必须按选择的顺序设置。

我需要它，就像我删除任何值然后在与删除值相同的位置添加新值并保留顺序时一样。不删除值将新值添加到数组的末尾。谢谢

好吧，我想现在您知道如何删除该项目，您可以尝试更改代码，或使用任何其他示例，您会做到的，快乐编码！