如何在表格中检查选定的值？

Posted 2023-05-08

【中文标题】如何在表格中检查选定的值？

【英文标题】：How to get checked selected values in the table?

【发布时间】：2021-08-25 03:46:09

【问题描述】：

我对表格中的复选框功能有疑问。我需要按照校验为真，那么选中的公司值就会报警。

例如，对于我在下图中的编码，我希望结果是，如果我勾选了第一行和第五行，则显示警报消息Alfreds Futterkiste,Laughing Bacchus Winecellars

以下是我的示例代码，希望有人能指导我如何解决这个问题。谢谢。

function show_value() 
  var checkbox_state = []
  var company_name = []
  //use each loop
  $("[name=checkbox_val]").each(function() 
    checkbox_state.push($(this).is(":checked"))
    company_name.push($(this).closest("tr").find("[name=company_name]").val()) //push value in array

  )
  var check_value = checkbox_state.toString();
  
  if(check_value == true)
       alert (company_name.toString());
  
  

<style>
table 
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;


td,
th 
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;


tr:nth-child(even) 
  background-color: #dddddd;

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table>
  <tr>
    <th>Checkbox</th>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0" />&nbsp;</td>
    <td><input type="text" name="company_name" value="Alfreds Futterkiste" /></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0" />&nbsp;</td>
    <td><input type="text" name="company_name" value="Centro comercial Moctezuma" /></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0" />&nbsp;</td>
    <td><input type="text" name="company_name" value="Ernst Handel" /></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0" />&nbsp;</td>
    <td><input type="text" id="company_name" name="company_name" value="Island Trading" /></td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0" />&nbsp;</td>
    <td><input type="text" name="company_name" value="Laughing Bacchus Winecellars" /></td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
</table>
<button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="show_value()">Show selected company value</button>

【参考方案1】：

您可以将其简化为：

function show_value() 
  var checkbox_state = []
  var company_name = []
  $("[name=checkbox_val]:checked").each(function() 
    company_name.push($(this).closest("tr").find("[name=company_name]").val()) //push value in array
  )
  console.log(company_name.toString());

一个问题是if(check_value == true) 这一行，因为check_value 看起来像true,false,false,false,true，所以它永远不会是真的。

演示

function show_value() 
  var checkbox_state = []
  var company_name = []
  $("[name=checkbox_val]:checked").each(function() 
    company_name.push($(this).closest("tr").find("[name=company_name]").val()) //push value in array
  )
  console.log(company_name.toString());

<style>
  table 
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  
  
  td,
  th 
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  
  
  tr:nth-child(even) 
    background-color: #dddddd;
  
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table>
  <tr>
    <th>Checkbox</th>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0" />&nbsp;</td>
    <td><input type="text" name="company_name" value="Alfreds Futterkiste" /></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0" />&nbsp;</td>
    <td><input type="text" name="company_name" value="Centro comercial Moctezuma" /></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0" />&nbsp;</td>
    <td><input type="text" name="company_name" value="Ernst Handel" /></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0" />&nbsp;</td>
    <td><input type="text" id="company_name" name="company_name" value="Island Trading" /></td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0" />&nbsp;</td>
    <td><input type="text" name="company_name" value="Laughing Bacchus Winecellars" /></td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
</table>
<button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="show_value()">Show selected company value</button>