Question

我想将div ID和checked值存储到数组中。

FIDDLE

假设我从品牌检查samsung和lenovo，从 ram 检查5gb，数组应为：

array[ ] = ["brand" => "samsung,lenovo" , "ram" => "5gb"]

HTML

 <div id="brand">
<input type="checkbox" class="chkbx" value="Samsung">Samsung<br>
<input type="checkbox" class="chkbx" value="Nikon">Nikon<br>
<input type="checkbox" class="chkbx" value="Lenovo">Lenovo<br>
<input type="checkbox" class="chkbx" value="Alcatel">Alcatel<br>
 </div>

<div id="ram">
<input type="checkbox" class="chkbx" value="2 GB">2 GB<br>
<input type="checkbox" class="chkbx" value="3 GB">3 GB<br>
<input type="checkbox" class="chkbx" value="5 GB">5 GB<br>
<input type="checkbox" class="chkbx" value="6 GB">6 GB<br>
</div>

请注意，div是从服务器动态抓取的。这只是一个例子，有多个div，并且不可能知道特定div的Id。

任何帮助表示赞赏提前谢谢。

Answer 1

var values = {};

// go through each checkbox
$(':checkbox').each(function() {
    // initialize the array of values using the checkbox name/group
    values[this.name] = values[this.name] || [];

    if (this.checked)
    {
        // if the checkbox is checked, add it to the array of values
        values[this.name].push(this.value);
    }
});

此示例假定您的复选框具有name属性，他们应该这样做。如果他们绝对不能拥有name属性（并且，他们确实应该这样做），并且您绝对必须使用div ID，则可以使用：

// if this.name (checkbox name/group) is unavailable, use closest div's ID
var name = $(this).closest('div').attr('id');

此外，此示例将构造数组映射，而不是字符串中逗号分隔值的映射。如果需要字符串，可以在数组上使用.join(',')。

Answer 2

＆＃13;

$('[type="button"]').click(function() {
  var results = [];
  $('div').each(function() {
    var vals = $(this).find(':checked').map(function() {
      return $(this).val();
    }).get().join(',');
    results[$(this).attr('id')] = vals;
  });
  console.log(results);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="brand">
  <input type="checkbox" class="chkbx" value="Samsung">Samsung
  <br>
  <input type="checkbox" class="chkbx" value="Nikon">Nikon
  <br>
  <input type="checkbox" class="chkbx" value="Lenovo">Lenovo
  <br>
  <input type="checkbox" class="chkbx" value="Alcatel">Alcatel
  <br>
</div>

<div id="ram">
  <input type="checkbox" class="chkbx" value="2 GB">2 GB
  <br>
  <input type="checkbox" class="chkbx" value="3 GB">3 GB
  <br>
  <input type="checkbox" class="chkbx" value="5 GB">5 GB
  <br>
  <input type="checkbox" class="chkbx" value="6 GB">6 GB
  <br>
</div>
<input type="button" value="Get Array" />

＆＃13;

Answer 3

此little snippet将创建一个数组并根据复选框对其进行更新。根据你的问题，它是多方面的。

var arr = [];
$("input[type=checkbox]").on("change", function(){
    var $this = $(this),
    $id = $this.parent().attr("id"),
    value = $this.val();
    if(typeof arr[$id] != "object"){
        arr[$id] = [];
    }
    if($this.is(":checked")){
        arr[$id].push(value);
    }else{
        var ai = arr[$id].indexOf(value);
        arr[$id].splice(ai, 1);
    }
});

如果您需要品牌和ram为CSV（逗号分隔值），那么您可以按@Agop建议并使用.join(',')，例如：

newArr['brand'] = arr['brand'].join(',');

将Div id和checkbox值存储到数组（多维）Jquery

3 个答案: