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

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

0 голосов
/ 26 марта 2019

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

Чтобы проверить значение флажка, я создал скрытый ввод для определенного флажка.Но после добавления нескольких строк и установки флажка все скрытые входные значения будут изменены.Например, если скрытое значение ввода - «Истина», то после установки флажка все скрытые значения ввода изменятся на «Ложь».

Пожалуйста, покажите приведенный ниже пример: 

$(".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 Ответ

0 голосов
/ 26 марта 2019

Разместите предупреждение после блока 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">
...