Question

所以我有一个表单，显示一个表，每行有2个复选框。提交表单时，我正在尝试将至少选中了一个复选框的行写入后端。

标记：

<form id="my_form">
   <table>
     <tr data-id="1">
       <td><input type="checkbox" class="js-option-1"></td>
       <td><input type="checkbox" class="js-option-2"></td>
     </tr> 
     <!-- etc -->
   </table>
</form>

所以我有一个事件处理程序，它试图构建一个对象数组以发送到后端：

$("#my_form").live 'submit', (event) ->
  event.preventDefault()
  rows = []
  $("input:checked").each () ->
    rows.push row
  objects = []
  $.each objects, (index, value) ->
    object = {
      id: $(@).attr("data-id")
      option_1: $(@).find("js-option-1").val()
      option_2: $(@).find("js-option-2").val()
    }
    objects.push object
  # ajax code

问题当然是，如果检查了两个选项，我最终会在数组中找到两个对象，从而发送简化数据。

我尝试通过尝试检测重复项并在这种情况下忽略推送来试图解决这两个阵列：

$("input:checked").each () ->
  row = $(@).closest("tr")
  if $.inArray(row, rows) == -1 #if no duplicate
    rows.push row

# or 

if $.inArray(object, objects) == -1
  objects.push object

然而，这两种方法都失败了，因为我认为比较对象文字和jquery对象的机制导致它们被认为是不相等的，即使它们在所有通常的方面都是相同的。还有其他想法吗？

Answer 1

使用选择器

$(':checked').closest('tr')

因此，您的选择逻辑首先不包含重复项。或者如果你更喜欢逻辑，那就更明显了：

$('tr').has(':checked')

Answer 2

不要迭代input:checked的集合，而是tr:has(:checked)，这样您只会处理至少检查过一次选项的每一行。

尝试：http://jsfiddle.net/NrHQ4/（抱歉，没有咖啡）

$('#my_form').on('submit', function(e){
    var $this = $(this), rows = $this.find('tr:has(:checked)'), objects = [];
    rows.each( function(){
        var $row = $(this);
        objects.push({
            id :  $row.data('id'),
            option_1 : $row.find('.js-option-1').is(':checked'),
            option_2 : $row.find('.js-option-2').is(':checked')
        });
    });
    console.log( objects );
    e.preventDefault();
});

检测javascript数组中的重复jquery元素

2 个答案: