问题描述
表格中的复选框功能有问题。我需要跟踪检查是否为真,然后选择的公司值会被提醒。
例如对于我在下图中的编码,我希望结果是如果我勾选了第一行和第五行,则显示警报消息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" /> </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" /> </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" /> </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" /> </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" /> </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>
解决方法
您可以将其缩短为:
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,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" /> </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" /> </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" /> </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" /> </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" /> </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>