Question

我正在尝试获取div中所有选中复选框的值，并使用选中复选框的值设置输入框的值。

我的代码如下：

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>

的Javascript

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

这似乎不起作用。我不确定我的jquery选择元素是否是问题或其他。

小提琴：https://jsfiddle.net/rdawkins/avy1mdvr/

Answer 1

你的剧本很好，当我做了一些改动时，它对我起作用，看看。

我只是格式化您的HTML代码并在jquery中添加文档就绪函数。还更新选择至少一个复选框无效的条件。应该是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");  
        }
    });
});

修改后的HTML：

<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>

Answer 2

从表格中移除div元素，并为tr提供checkboxlist 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>

您还需要在检查长度时使用> 0，因为您希望它们选择至少一个。只检查数组的长度，而不是字符串，它也可能更具可读性。

if (chkArray.length > 0) {
...

UPDATED FIDDLE

Answer 3

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>

Javascript ：注意长度检查（＆gt; 0，不是＆gt; 1）

$("#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 atleast one of the checkboxes");  
    }
});

Answer 4

首先，你不能在表格中加上“div”标签，这不是HTMLy正确的。

其次，如果你只想获得表中输入的值，那么给表一个id。

最后，你需要确保所有输入都是类型复选框，因为它总是很好地控制你调用的变量，这不是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：https://jsfiddle.net/Yazsid/avy1mdvr/8/

Jquery选中已选中的复选框无效

4 个答案: