Question

假设我有下面的html。最有效的方法是什么？

复选框列表可以增加到数百个，因此保持它很小很重要

<span class="text"></span>
<div class="allboxes">
  <input type="checkbox" value="a">
  <input type="checkbox" value="b">
  <input type="checkbox" value="c">
  <input type="checkbox" value="d">
</div>

// on click of a checkbox, span should be populated by the checked boxes
// <span class="text">a b d</span>

Answer 1

<span class="text"></span>
<div class="allboxes">
  <input type="checkbox" value="a">
  <input type="checkbox" value="b">
  <input type="checkbox" value="c">
  <input type="checkbox" value="d">
</div>

jquery part

var n = jQuery("div.allboxes :checkbox").map(function(){ 
         return jQuery(this).val();}).get().join(" ");
alert(n);

工作示例here

Answer 2

jQuery('input:checked')

修复HTML。您不能在属性值之间使用逗号。

Answer 3

清理html：

<span class="text"></span>
<div class="allboxes">
  <input type="checkbox" value="a">
  <input type="checkbox" value="b">
  <input type="checkbox" value="c">
  <input type="checkbox" value="d">
</div>

然后你可以这样做：

$('.allboxes input').change(function() {
    var whichSelected = [];
    $.each($('.allboxes input:checked'), function(a,b) {
        whichSelected.push($(b).val());
    });
    $('.text').text(whichSelected.join(' '));
});

小提琴：http://jsfiddle.net/amirshim/sDDps/3/

Answer 4

我建议避免解析所有复选框。使用全局数组存储要在span中填充的值。

var globalvar = new Array();
function populate(obj){
 globalvar .push( obj.value));
 $('.text').text(globalvar.join(' '));
}

将html制作如下。或运行一些函数只插入一次这些函数。

<span class="text"></span>
<div class="allboxes">
  <input type="checkbox" value="a" onclick="populate(this)">
  <input type="checkbox" value="b" onclick="populate(this)">
  <input type="checkbox" value="c" onclick="populate(this)">
  <input type="checkbox" value="d" onclick="populate(this)">
</div>

使用jQuery使用checked复选框的值填充span

4 个答案: