我有带输入字段的复选框。单击复选框后,相关的输入字段将打开,并在输入中键入一些文本。但是,当我取消选中该复选框时,来自相关输入的文本应为空白。
<?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 } ?>
我的jquery是:
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();
});
当我取消选中该复选框时,相关的输入字段应为空白或删除。这没有发生。请帮助。
对不起,无法使用PHP
。因此示例仅出现在HTML
和jQuery
中。
您隐藏了div
的父级input
,但没有清空它。
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>
要从input
中删除该值,请使用val('')
。同样,next()
在这种情况下不起作用,因为这些元素不是同级元素。您echo
他们之间的文本节点。要解决此问题,您可以将每个循环块包装在div
中,并使用closest()
和find()
的组合。
还请注意,您可以简化show()
/ hide()
逻辑以改为使用toggle()
,提供checked
属性作为确定内容是否可见的布尔参数。
最后,使用label
元素使用户能够通过复选框单击文本以进行检查。
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>