Question

我有一个主产品阵列

var prodArr = new Array('Microsoft', 'Google');

使用prodArr作为主循环，我创建了一个UL LI checkboxtree，如下所示：

<ul id="prodTree">
  <li>
    <input name="prod" id="prod" type="checkbox" value="Microsoft">
    <label>Microsoft</label>
    <ul id="MicrosoftTree">
      <li>
          <input id="prod" name="prod" type="checkbox" value="msp1">
          <label>Microsoft Product 1</label>
      </li>
      <li>
          <input id="prod" name="prod" type="checkbox" value="msp2">
          <label>Microsoft Product 2</label>
      </li>
    </ul>
    <li>
    <input name="prod" id="prod" type="checkbox" value="Google">
    <label>Google</label>
    <ul id="GoogleTree">
      <li>
          <input id="prod" name="prod" type="checkbox" value="gp1">
          <label>Google Product 1</label>
      </li>
      <li>
          <input id="prod" name="prod" type="checkbox" value="gp2">
          <label>Google Product 2</label>
      </li>
    </ul>
</ul>

单击按钮，我想使用prodArr并遍历每个UL并将所有复选框分组并创建一个文本框。让我们假设选择了'msp1'，'msp2'和'msp9'微软产品。例如：

<input type='text' id='Microsoft' value='msp1, msp2, msp9' />

我试过了。请帮忙。

Answer 1

您可以使用:checked伪选择器仅选中已选中的复选框，您可以使用val迭代匹配的集合并获取值：

$("#button").click(function() {
    $("#prodTree :checkbox:checked").each(function() {
        var value = $(this).val();
    });
});

以上是working example以上内容。

Answer 2

你为什么要这样做？你最好处理它的服务器端。如果您更改name的{{1}}，请执行以下操作：

input

然后在您的PHP代码中，您可以这样做：

<ul id="prodTree">
  <li>
    <ul id="MicrosoftTree">
      <li>
          <input id="prod" name="prod[microsoft][]" type="checkbox" value="msp1">
          <label>Microsoft Product 1</label>
      </li>
      <li>
          <input id="prod" name="prod[microsoft][]" type="checkbox" value="msp2">
          <label>Microsoft Product 2</label>
      </li>
    </ul>
    <ul id="GoogleTree">
      <li>
          <input id="prod" name="prod[google][]" type="checkbox" value="gp1">
          <label>Google Product 1</label>
      </li>
      <li>
          <input id="prod" name="prod[google][]" type="checkbox" value="gp2">
          <label>Google Product 2</label>
      </li>
    </ul>
</ul>

Answer 3

我试了一下。这可能不是'答案'，但我得到了我想要的东西

$("#regions:checked").each(function(){ 
  var x= "";
  var regionName = $(this).val();
  var treeName = "#"+$(this).val()+"Tree :checkbox:checked";
  var countryVal="";
  $(treeName).each(function(){ 
    if(countryVal != '') { countryVal += ','; }
      countryVal += $(this).val();
  });
});

随意提出更好的答案或技巧，以获得此结果。

横穿LI以使用jquery通过UL收集复选框组

3 个答案: