I have created checkbox in table row dynamically.
To check the value of checkbox, I have created hidden input for particular checkbox. But after adding the multiple rows and clicking on checkbox, all the hidden input values are changed. For example, If the hidden input value is True, then after clicking the checkbox, all the hidden input values are changed to False.
Please show the below example:
$(".add_initep_row").click(function(){
var markup = "<td style='width: 122px;'><div class='input-group'><input type='text' class='form-control textmodify_newSchedule datepicker_recurring_start' id='ep_date' ><span class='input-group-addon datepicker_recurring_start_calender'><span class='glyphicon glyphicon-calendar'></span></span></div></td><td><textarea></textarea></td><td><input type='hidden' class='ep_cmpl_val' value='False'><input type='checkbox' class='cmpl_checkbox' onclick='myfunction()'></td>";
$('#init_ep_table tbody') // select table tbody
.prepend('<tr />') // prepend table row
.children('tr:first') // select row we just created
.append(markup) // append four table cells to the row we created
/*$("table tbody").append(markup);*/
});
function myfunction()
{
var input = $('.cmpl_checkbox').prev('.ep_cmpl_val').val();
alert(input);
if (input == 'False')
{
$('.cmpl_checkbox').prev('.ep_cmpl_val').val('True');
}
else
{
$('.cmpl_checkbox').prev('.ep_cmpl_val').val('False');
}
}
$(document).ready(function(){
$('.cmpl_checkbox').click(function() {
var input = this.previousSibling.value;
//alert(input);
if (input == 'False')
{
this.previousSibling.value='True';
}
else
{
this.previousSibling.value='False';
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="init_ep_table">
<tr>
<td>
<div class="input-group">
<input type="text" class="form-control textmodify_newSchedule datepicker_recurring_start" >
<span class="input-group-addon ep_date4_calender datepicker_recurring_start_calender"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</td>
<td>
<textarea></textarea>
</td>
<td>
<input type="hidden" value="False"><input type="checkbox" class="cmpl_checkbox">
</td>
</tr>
</table>
<input type="button" class="add_initep_row" value="Add Row">
Default checkboxes are working fine but checkboxes which are created dynamically, are having issues with hidden input values.
Please help me with this issue.
Aucun commentaire:
Enregistrer un commentaire