delete value from input when uncheck the checkbox

Question

I have checkbox with input fields. When checkbox is clicked then related input field opens and type some text in input. But when I uncheck the checkbox then text from related input should be blank.

<?php 
  $result = $obj->show_social_icons();
  foreach($result as $row)
   {
?>
  <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="<?php echo $row['id']; ?>">

  <?php echo $row['name']; ?>
  <div class="max_tickets">
    <input type="text" name="link[]" class="link">
  </div>
  <br>
<?php } ?>

My jquery is:

 jQuery(document).ready(function($) {
$('input.maxtickets_enable_cb').change(function(){
if ($(this).is(':checked'))
$(this).next('.max_tickets').show();
else
$(this).next('.max_tickets').hide();
}).change();
});

When I uncheck the checkbox then related input filed should be blank or erase. It is not happening. Please help.

Umair Khan · Accepted Answer · 2020-04-23 12:42:56Z

Sorry could not use PHP. So example is just in HTML and jQuery.

You were hiding the parent div of input but not emptying it.

jQuery(document).ready(function($) {
  $('input.maxtickets_enable_cb').change(function() {
    if ($(this).is(':checked'))
      $(this).next('.max_tickets').show();
    else
      $(this).next('.max_tickets').hide().children('input').val('');
  }).change();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="1">
<div class="max_tickets">
  <input type="text" name="link[]" class="link">
</div>
<br>
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="2">
<div class="max_tickets">
  <input type="text" name="link[]" class="link">
</div>
<br>
<input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="3">
<div class="max_tickets">
  <input type="text" name="link[]" class="link">
</div>
<br>

Rory McCrossan · Accepted Answer · 2020-04-23 12:38:20Z

To remove the value from an input use val(''). Also, next() doesn't work in this case as the elements are not siblings; you echo a text node between them. To fix this you could wrap each looped block in a div and use a combination of closest() and find().

Also note that you can simplify the show()/hide() logic to use toggle() instead, providing the checked property as the boolean argument which determines whether the content should be made visible or not.

Finally, use label elements to enable the user to click the text by the checkbox in order to check it.

jQuery($ => {
  $('input.maxtickets_enable_cb').change(function() {
    $(this).closest('.row').find('.max_tickets').toggle(this.checked).find('input').val('');
  }).trigger('change');
});

.max_tickets { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <label>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="id1" /> 
    Name #1
  </label>
  <div class="max_tickets">
    <input type="text" name="link[]" class="link">
  </div>
</div>
<div class="row">
  <label>
    <input type="checkbox" class="maxtickets_enable_cb" name="opwp_wootickets[]" value="id2" /> 
    Name #2
  </label>
  <div class="max_tickets">
    <input type="text" name="link[]" class="link">
  </div>
</div>

Collectives™ on Stack Overflow

delete value from input when uncheck the checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related