Question

我有一个复选框列表，对于每个复选框，我想从label标签中分配类名（即区域），并从输入标签中分配值（即国家/地区），以便在阵列。换句话说，我希望数组为： ["Europe", "Albania"] ["Europe", "Belgium"] ["NAM", "Canada"] ["NAM", "Cuba"]。目前我正在区分地区和国家，因为它们在不同的标签中，然后计划加入它们，但我不能相信这是有效的，我想我已经迷茫了。有谁知道更好的方法？小提琴：http://jsfiddle.net/fruL2u9L/

<div id="CountryStore_prodn">

<label class="Europe"><input type="checkbox"  id="UN8a" value="Albania" />Albania</label>
<label class="Europe"><input type="checkbox"  id="UN58a" value="Belgium" />Belgium</label>
<label class="NAM"><input type="checkbox"  id="UN124a" value="Canada" />Canada</label>
<label class="NAM"><input type="checkbox"  id="UN192a" value="Cuba" />Cuba</label>

</div>

// Assign all Filter regions to array
Region = $('#CountryStore_prodn label').map(function() {
  return this;
}).get();

// Assign all Country regions to array
Country = $('#CountryStore_prodn input').map(function() {
  return this.value;
}).get();

console.log(Region);    
console.log(Country);

Answer 1

以下是两个在功能上做同样事情的选项：在第一种情况下，我们只是处理所有标签元素并从中创建一个双成员数组，我们将其添加到主数组中。在第二个中，我们等待复选框被更改，并且我们从输入元素列表本身动态地重新创建已检查的数组。希望它有所帮助！

＆＃13;

// Create an array for all checkbox els
var masterArr = [], checkedArr = [];

// We'll go through and append the pair to the master array.
$("label").each(function(){
  // create a temporary array.
  var arrayItem = [];
  // Add the two values we'll need.
  arrayItem.push($(this).prop("class"));
  arrayItem.push($(this).find("[type='checkbox']").val() );
  
  // Now, we'll add that two-item array to the master.
  masterArr.push(arrayItem);
  });
  console.log(masterArr);
  
// Another thing we can do, is to create an array of just
//  the checked items. In this, we're doing the same thing, 
//  but rather than reference the label, we'll be starting
//  from the checked checkboxes.
$("input[type='checkbox']").on("change", function() {
  // Empty the checked array
  checkedArr = [];
  // process each checked box, and create a two-item array.
  $("input[type='checkbox']:checked").each(function() {
    var arrayEl = [];
    arrayEl.push($(this).parent().prop("class"));
    arrayEl.push($(this).val())
    
    // Add that two-item array to the checkedArr
    checkedArr.push(arrayEl);
  });
  console.log(checkedArr);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="CountryStore_prodn">

<label class="Europe"><input type="checkbox"  id="UN8a" value="Albania" />Albania</label>
<label class="Europe"><input type="checkbox"  id="UN58a" value="Belgium" />Belgium</label>

<label class="NAM"><input type="checkbox"  id="UN124a" value="Canada" />Canada</label>
<label class="NAM"><input type="checkbox"  id="UN192a" value="Cuba" />Cuba</label>

</div>

＆＃13;

Answer 2

＆＃13;

var arr = [];
$('#CountryStore_prodn label').each(function() {
      arr.push([$(this).attr("class"),$("input",this).val()]);
});
console.log(arr);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="CountryStore_prodn">

<label class="Europe"><input type="checkbox"  id="UN8a" value="Albania" />Albania</label>
<label class="Europe"><input type="checkbox"  id="UN58a" value="Belgium" />Belgium</label>

<label class="NAM"><input type="checkbox"  id="UN124a" value="Canada" />Canada</label>
<label class="NAM"><input type="checkbox"  id="UN192a" value="Cuba" />Cuba</label>

</div>

＆＃13;

将不同标签中的元素分配给数组

2 个答案: