選中複選框，重置輸入

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