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

时间:2019-03-26 04:20:37

标签: jquery html checkbox input

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

要检查复选框的值,我为特定复选框创建了隐藏的输入。但是在添加多行并单击复选框后,所有隐藏的输入值都会更改。例如,如果隐藏的输入值为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 个答案:

答案 0 :(得分:0)

将警报放置在if else块之后,您的警报在if else块之前,因此始终为false

    private void button1_Click(object sender, EventArgs e)
    {
        CANoe.Application CANoe_big = new CANoe.Application();
        CANoe_big.Open(@"All_neu.cfg");

        CANoe.CAPLFunction Neu = new CANoe.CAPLFunction();

    }
$(".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';
		    }
		  });
    });