Question

我对使用jQuery或JavaScript方法的复选框的最佳实践感到好奇。想象一下表单中的一堆复选框，每行有1个复选框（值是唯一的），点击其中的2个并简单地在数组中使用这些值...

问题在于教育动机，而不是真正的问题，我使用了一个项目并制作了一个非常大的代码来处理复选框，

HTML：

<input class="checkbox" type="checkbox" id="1" name="group" onclick="agregarDel("1")"/>

JavaScript的：

function agregarDel(id)
{
  if(document.getElementById(id).checked)
  {
          eliminar.push(document.getElementById(id).name);
  }else{
          var aux = eliminar.indexOf(document.getElementById(id).name);
          if(aux !== -1) eliminar.splice(aux, 1);
  }
}

上面的代码只是我思考的一个不好的例子。我们的想法是找到最好和更有效的方法来获得带有选中项目的ARRAY值。

Answer 1

如果您要求最好的方法，那么回答的唯一方法就是做一些基准测试......

我编写了3种不同的方法，并测量了他们解决问题的时间。

方法1

使用jQuery查找复选框，然后使用.prop（'checked'）过滤选中的复选框

时间： 51ms

方法2

使用jQuery查找在选择器$（'input：checked'）

中过滤的复选框

时间： 14ms

方法3

没有jQuery

时间： 7ms

以下是您要测试的代码：http://jsfiddle.net/KcBEj/8/

//
// method 1
//

hola = [];
$('input').each(function(i,el){
    if($(el).prop('checked')){
        hola.push($(el).val());
    }
});

//
// method 2
//

hola = [];
$('input:checked').each(function(i,el){
    hola.push($(el).val());
});

//
// method 3
//

hola = [];
elems = document.getElementsByTagName('input');
for(i=0,n=elems.length;i<n;i++){
    if(elems[i].getAttribute('checked') == 'checked') {
        hola.push(elems[i].getAttribute('value'));
    }
}

获取已选中复选框的值的最佳方法是哪种？

1 个答案: