Jquery 选中选中的复选框不起作用

Jquery selecting checkboxes that are checked is not working

本文关键字：不起作用 复选框 Jquery      更新时间：2023-09-26

我正在尝试获取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>

爪哇语

$("#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/

你的脚本很好，当我做一些更改时它对我有用，看看。

我只是格式化您的 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");  
        }
    });
});

修改后的网页：

<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：删除表格内的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：注意长度检查（>0，而不是>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");  
    }
});

从表中删除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) {
...

更新的小提琴

首先，你不能在表格中放置"div"标签，这是不正确的。

其次，如果您只想获取表中输入的值，请为表提供一个 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");  
    }
  });

希望对您有所帮助。

小调：https://jsfiddle.net/Yazsid/avy1mdvr/8/

相关文章：