选中复选框，重置输入

Question

我有

输入和复选框。

---

我的目标

是当用户在输入框中更改某些内容时，我要开始显示set to default复选框。

然后，当set to default复选框为check ，我想将原始值重新设置为该输入。

---

这是我尝试过的

的HTML

<div class="col-xs-4">
    <input id="onboard_url" value="{{ $g_portal_url or ''}}" class="form-control" name="onboard_url" required placeholder="Ex. https://www.onboading.com" >
</div>

<div class="col-xs-2" style="display: none;" id="onboard_url_default">
    <input type="checkbox" id="onboard_url_default_cb" value="0" >
    Set to default
</div>

---

jQuery的

$('#onboard_url').on('keyup', function() {
    $('#onboard_url_default').show();

    if($('#onboard_url_default_cb').prop('checked')){
        $('#onboard_url_default_cb').val(1);
        console.log('checked');
        $("#onboard_url").val('');
        $("#onboard_url").val('{{ $g_portal_url or ''}}');
    }
});

---

$('#onboard_url').on('keyup', function() {
    $('#onboard_url_default').show();

    if($('#onboard_url_default_cb').is(':checked')){
        $('#onboard_url_default_cb').val(1);
        console.log('checked');
        $("#onboard_url").val('');
        $("#onboard_url").val('{{ $g_portal_url or ''}}');
    }
});

---

结果

我无法打印console.log 。

我不确定我在这里错过了什么。 :(

Answer 1

我认为，对于UX使用这种情况的复选框是错误的。 最好的方法是使用按钮。 这是我的按钮代码。

$(function(){
    $('#your_button').click(function(){
        $("#onboard_url").val('');
        $("#onboard_url").val('{{ $g_portal_url or ''}}');
    });
});

对于复选框，这是解决方案。

$(function(){
    $('#onboard_url').on('keyup', function() {
        $('#onboard_url_default').show();
    });

    $('#onboard_url_default_cb').on('change', function(){
        if($(this).prop('checked')){
            $(this).val(1);
            $("#onboard_url").val('');
            $("#onboard_url").val("{{ $g_portal_url or ''}}");
        }
    });
});