チェックボックスをオンにして、入力をリセットする

Question

私は

の入力とチェックボックスを持っています。

---

ユーザが入力ボックスに何かを変更したときに私の目標

があり、私はset to defaultチェックボックスの表示を開始します。

次に、set to defaultチェックボックスがcheckの場合、その入力に元の値を戻したいと思います。ここで

---

は私が

---

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

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

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> 

---

を試してきたものです

---

結果

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