Блог

Главная - Вопросы по программированию - Изменение значения скрытого ввода при событии нажатия флажка

Изменение значения скрытого ввода при событии нажатия флажка

#jquery #html #checkbox #input

#jquery #HTML #флажок #ввод

Вопрос:

Я создал флажок в строке таблицы динамически.

Чтобы проверить значение флажка, я создал скрытый ввод для определенного флажка. Но после добавления нескольких строк и нажатия на флажок все скрытые входные значения изменяются. Например, если скрытое входное значение равно 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">

Флажки по умолчанию работают нормально, но у флажков, которые создаются динамически, возникают проблемы со скрытыми входными значениями.

Пожалуйста, помогите мне с этой проблемой.

Ответ №1:

Разместите оповещение после блока if else, ваше оповещение находится перед блоком if else, поэтому всегда выдает 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();
		
		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">

Комментарии:

1. У меня все еще есть проблема в этом, если я добавлю 2 строки и установлю один флажок, а другой сниму и отправлю эту форму, это даст мне оба флажка с истинным значением, и если я сниму флажок и отправлю форму, тогда я получу оба флажка с ложным значением