在复选框的单击事件上更改隐藏输入的值

Question

我已经在表格行中动态创建了复选框。

为了检查复选框的值，我为特定的复选框创建了隐藏输入。但是在添加多行并单击复选框后，所有隐藏的输入值都会更改。例如，如果隐藏的输入值为True，那么在点击复选框后，所有隐藏的输入值都变为False。

请显示以下示例：

$(".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">

默认复选框工作正常，但动态创建的复选框存在隐藏输入值问题。

请帮我解决这个问题。

Answer 1

将警报放在 if else 块之后，您的警报在 if else 块之前，因此总是给出错误

$(".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();
		
		if (input == 'False') 
	    {
	    	$('.cmpl_checkbox').prev('.ep_cmpl_val').val('True');
        
	    }
	    else
	    {
	    	$('.cmpl_checkbox').prev('.ep_cmpl_val').val('False');
          
	    }
      alert(input);
	}
  
  $(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">