Javascript Jquery选择选中的复选框无效

我试图获取div中所有选中复选框的值，并使用选中复选框的值设置inputbox的值

我的代码如下：

HTML

<table class="table-striped">
 <div id="checkboxlist">
  <tr>
   <td><input type="checkbox" value="S"/>Sausages</td>
   <td><input type="checkbox" value="N"/>Noodles</td>
   <td><input type="checkbox" value="W"/>Wurst</td>
   <td><input type="checkbox" value="E"/>Eggs</td>
   <td><button type="button" id="getresultbutton">Add items</button></td>
  </tr>
 </div>
</table>
   <div>    
    <input type="text" id="results">
   </div>

这似乎不起作用。我不确定我对元素的jquery选择是问题还是其他原因

---

小提琴手：

你的剧本很好，当我做了一些改变时，它对我很有用，看一看

我只是格式化HTML代码并在jquery中添加一个文档就绪函数。同时更新至少选择一个复选框无效的条件。is应该是0

修改脚本：

$(function(){
    $("#getresultbutton").on("click", function(){
        var chkArray = [];
        $("#checkboxlist input:checked").each(function() {
            chkArray.push($(this).val());
        });
        var selected;
        selected = chkArray.join(',');
        if(selected.length > 0){
            $("#results").val(selected);
        }else{
            alert("Please select at least one of the checkboxes");  
        }
    });
});

<div id="checkboxlist">
    <table class="table-striped">   
        <tr>
        <td><input type="checkbox" value="S"/>Sausages</td>
        <td><input type="checkbox" value="N"/>Noodles</td>
        <td><input type="checkbox" value="W"/>Wurst</td>
        <td><input type="checkbox" value="E"/>Eggs</td>
        <td><button type="button" id="getresultbutton">Add items</button></td>
        </tr>
    </table>
</div>

<div>    
    <input type="text" id="results">
</div>

修改的HTML:

$(function(){
    $("#getresultbutton").on("click", function(){
        var chkArray = [];
        $("#checkboxlist input:checked").each(function() {
            chkArray.push($(this).val());
        });
        var selected;
        selected = chkArray.join(',');
        if(selected.length > 0){
            $("#results").val(selected);
        }else{
            alert("Please select at least one of the checkboxes");  
        }
    });
});

<div id="checkboxlist">
    <table class="table-striped">   
        <tr>
        <td><input type="checkbox" value="S"/>Sausages</td>
        <td><input type="checkbox" value="N"/>Noodles</td>
        <td><input type="checkbox" value="W"/>Wurst</td>
        <td><input type="checkbox" value="E"/>Eggs</td>
        <td><button type="button" id="getresultbutton">Add items</button></td>
        </tr>
    </table>
</div>

<div>    
    <input type="text" id="results">
</div>

香肠
面条
乌斯特
鸡蛋
添加项目

从表中删除

div

元素，并为

tr

提供

复选框列表

ID

<table class="table-striped">
  <tr id="checkboxlist">
    <td>
      <input type="checkbox" value="S" />Sausages</td>
    <td>
      <input type="checkbox" value="N" />Noodles</td>
    <td>
      <input type="checkbox" value="W" />Wurst</td>
    <td>
      <input type="checkbox" value="E" />Eggs</td>
    <td>
      <button type="button" id="getresultbutton">Add items</button>
    </td>
  </tr>
</table>
<div>
  <input type="text" id="results">
</div>

---

HTML：删除表中的div

<table class="table-striped">
  <tr id="checkboxlist">
   <td><input type="checkbox" value="S"/>Sausages</td>
   <td><input type="checkbox" value="N"/>Noodles</td>
   <td><input type="checkbox" value="W"/>Wurst</td>
   <td><input type="checkbox" value="E"/>Eggs</td>
   <td><button type="button" id="getresultbutton">Add items</button></td>
  </tr>
</table>
   <div>    
    <input type="text" id="results">
   </div>

首先，您不能在表中放置“div”标记，这在HTML上是不正确的

第二，如果只想获取表中输入的值，那么给表一个id

最后，您需要确保所有输入都是type checkbox，因为控制您调用的变量总是好的，这不是100%必要的，但它将在将来编程更困难的函数时帮助您

 $("#getresultbutton").on("click", function(){
  var chkArray = [];
  $("#tableCheck input[type='checkbox']:checked").each(function() {
   chkArray.push($(this).val());

  });
  var selected;
  selected = chkArray.join(',');
  if(chkArray.length > 0){
    $("#results").val(selected);
     }else{
 alert("Please select atleast one of the checkboxes");  
    }
  });

希望能有帮助

---

Fidle:

你能做一把小提琴吗？嗯，一个问题是你的HTML是无效的。你不能在

中放入

元素。你必须…抵制…敦促…重新排列那些菜单项，使它们的

值改为“NSEW”…@FrayneKonok我更新了我的问题，包括小提琴谢谢你的回答！谢谢安德鲁！我很感激它能完美地工作！我选择这个答案的原因是因为在我的完整代码中有几个表和div，这将是我处理这个问题的理想方式。非常感谢你！谢谢你的回答@Yazsid。我会记下你的建议。
 $("#getresultbutton").on("click", function(){
  var chkArray = [];
  $("#tableCheck input[type='checkbox']:checked").each(function() {
   chkArray.push($(this).val());

  });
  var selected;
  selected = chkArray.join(',');
  if(chkArray.length > 0){
    $("#results").val(selected);
     }else{
 alert("Please select atleast one of the checkboxes");  
    }
  });