html - 通过复选框在页面中显示附加字段的概念

Question

有人可以告诉我当有人点击复选框时如何显示附加字段。就像在结帐时询问您是否有优惠券一样。如果单击它，则页面会在复选框下方扩展另一个字段，我们将在其中获得一个文本框来输入数据。它背后的想法是什么？

谢谢

Answer 1

The idea is to respond to the click or change event of the checkbox and then show some already existing HTML or add some dynamically.

HTML

<input type="checkbox" id="chkbx1" />
<div id="extraContent"><!-- hidden content --></div>

Javascript

$(function () {

    $('#chkbx1').change(function () {

        if ($(this).is(':checked'))
            $('#extraContent').show();
        else
            $('#extraContent').hide();

    });

});

Answer 2

如果你只想使用直接的 Javascript，你可以有这样的东西：

<input type="checkbox" name="Coupon"id= "coupon"/> Coupon? <br>
<div style="display:none;" id="coupon_wrapper">
    <label>Coupon Code</label>
    <input type="text"/>
</div>

使用 Javascript 读取

document.getElementById('coupon').addEventListener('change',function(){
    if(document.getElementById('coupon').checked){
        document.getElementById('coupon_wrapper').style.display = 'block';
    }else{
        document.getElementById('coupon_wrapper').style.display = 'none';
    }
},false);