选中复选框，重置输入

Question

我有

输入和复选框。

我的目标

当用户在输入框中更改内容时，我想开始显示yoursite.scm.azurewebsites.net复选框。

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

这是我试过的

HTML

check

的jQuery

<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>

$('#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 ''}}'); } }); 。

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

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