如何获取 table 中选中的选中值？

Question

我对 table 中的复选框功能有疑问。我需要跟着检查是真的，然后选择的公司价值会被提醒。

例如我在下图中的编码，我希望结果是如果我勾选了第一行和第五行，然后显示警报消息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>

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

如何获取 table 中选中的选中值？

How to get checked selected values in the table?

javascript

jquery

checkbox

html-table

checkedlistbox