I have a problem displaying checked in the table according to id value in the array if I have to click the Show checked if id values are 1 and 5 button. For example, I want to display checked in the table if id values are 1 and 5.
But I using below sample javascript coding cannot show the selected checked in the table followed by the id value:
Javascript
function show_value() {
var selected_value = "1,5";
var checkbox_state = []
var id_value = []
//use each loop
$("[name=checkbox_val]").each(function() {
checkbox_state.push($(this).is(":checked"))
id_value.push($(this).closest("tr").find("[name=id_value]").val()) //push value in array
$("#checkbox_val").attr("checked", true);
})
var id_value_true = id_value.toString();
if(jQuery.inArray(selected_value, id_value_true) !== -1){
$("#checkbox_val").attr("checked", true);
}else{
$("#checkbox_val").attr("checked", false);
}
console.log("checkbox -- " + checkbox_state.toString() + " ID VALUE --" + id_value.toString())
}
Below is my whole sample coding:
function show_value() {
var selected_value = "1,5";
var checkbox_state = []
var id_value = []
//use each loop
$("[name=checkbox_val]").each(function() {
checkbox_state.push($(this).is(":checked"))
id_value.push($(this).closest("tr").find("[name=id_value]").val()) //push value in array
$("#checkbox_val").attr("checked", true);
})
var id_value_true = id_value.toString();
if(jQuery.inArray(selected_value, id_value_true) !== -1){
$("#checkbox_val").attr("checked", true);
}else{
$("#checkbox_val").attr("checked", false);
}
console.log("checkbox -- " + checkbox_state.toString() + " ID VALUE --" + id_value.toString())
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<table>
<tr>
<th>Checkbox</th>
<th>ID Value</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="1"/></td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="2"/></td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="3"/></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="id_value" name="id_value" value="4"/></td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="5"/></td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"> </td>
<td><input type="text" id="id_value" name="id_value" value="6"/></td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table></br>
<button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="show_value()">Show checked if id values are 1 and 5</button>
</body>
</html>Actually, I want the expected result like below the picture:
Hope someone can guide me on how to solve this problem. Thanks.
Aucun commentaire:
Enregistrer un commentaire