フォームの特定の入力フィールドが空でないときにラジオボタンの選択を変更する方法

Question

入力フィールドが入力されたとき（空ではない）ラジオボタンにチェックマークを付ける必要があります。したがって、「電話番号」フィールドが記入されると、ラジオボタンにはSMSがすぐにチェックされます。これが可能なら誰でも考えがありますか？

<div class="form-group phone-field row row-eq-height"> 
    <div class="col-sm-4"> 
     <label for="inputPhone">Phone number (optional)</label> 
    </div> 
    <div class="col-sm-4"> 
     <div class="form-inline"> 
      <div class="form-group"> 
       <label class="prepend">+32</label> 
       <input type="text" class="form-control" name="phonenumber" id="inputPhone" placeholder="" value=""> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="switch-button row row-eq-height"> 
    <div class="col-sm-4"><label for="contact_style">Receive your token by</label></div> 
    <div class="col-sm-4"> 
     <div class="switch-field clearfix"> 
      <input type="radio" id="switch_left" name="contact_style" value="email"> 
      <label for="switch_left">EMAIL</label> 
      <input type="radio" id="switch_right" name="contact_style" value="sms"> 
      <label for="switch_right">SMS</label> 
     </div> 
    </div> 
</div> 

Answer 1

ちょうどあなたのinputためevent handlerを追加し、ラジオが値に基づいてcheckedかが存在するかではないことを持っているかどうかを確認することを決定しました。 copy/pasteも識別できるようにinput event handlingを添付しています。

$(document).ready(function() { 
 
    $("#inputPhone").on('input', function() { 
 
    var val = $(this).val().length ? true : false; //check if it has value 
 
    $('input:radio[value="sms"]').prop('checked', val);//check or uncheck 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group phone-field row row-eq-height"> 
 
    <div class="col-sm-4"> 
 
    <label for="inputPhone">Phone number (optional)</label> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <div class="form-inline"> 
 
     <div class="form-group"> 
 
     <label class="prepend">+32</label> 
 
     <input type="text" class="form-control" name="phonenumber" id="inputPhone" placeholder="" value=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="switch-button row row-eq-height"> 
 
    <div class="col-sm-4"> 
 
    <label for="contact_style">Receive your token by</label> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
    <div class="switch-field clearfix"> 
 
     <input type="radio" id="switch_left" name="contact_style" value="email"> 
 
     <label for="switch_left">EMAIL</label> 
 
     <input type="radio" id="switch_right" name="contact_style" value="sms"> 
 
     <label for="switch_right">SMS</label> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

これは間違いなくもっともらしいです - しかし、設計側から私は電話番号を入力したという理由だけで、私はそこに自分の成果を望ん意味するものではありませんと言うでしょう;）ここで

はjQueryのを使用して作業例です - これは全く新しい問題であるため、検証には考慮されていません。

https://jsfiddle.net/hepuu2kh/

$("#inputPhone").on('change', function(){ 
    var val = $("#inputPhone").val(); 
    if(val != ""){ 
     $("#switch_right").prop("checked", true) 
    } 
}) 

あなたは、テキストフィールドが変更されたときに、瞬時の更新プログラムを持っている「入力」から「変更」からイベントを切り替えることができます。

Answer 3

あなたはそれが入力の値がない場合は、チェックすることができ

Answer 4

をフォーカスを失った後、あなたのテキストボックスにテキストの値をチェックすることで、ラジオボタンの値を設定し、あなたのテキストボックスにぼかしリスナーを追加することができます空とセットラジオボタン値：私はそれがこれよりも簡単にできませんことができますね

$(function() { 
 
    $('#inputPhone').on('keyup', function() { 
 
    if ($(this).val() != '') { 
 
     $('#switch_right').prop('checked', true); 
 
    } else { 
 
     $('#switch_right').prop('checked', false); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group phone-field row row-eq-height"> 
 
    <div class="col-sm-4"> 
 
     <label for="inputPhone">Phone number (optional)</label> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <div class="form-inline"> 
 
      <div class="form-group"> 
 
       <label class="prepend">+32</label> 
 
       <input type="text" class="form-control" name="phonenumber" id="inputPhone" placeholder="" value=""> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="switch-button row row-eq-height"> 
 
    <div class="col-sm-4"><label for="contact_style">Receive your token by</label></div> 
 
    <div class="col-sm-4"> 
 
     <div class="switch-field clearfix"> 
 
      <input type="radio" id="switch_left" name="contact_style" value="email"> 
 
      <label for="switch_left">EMAIL</label> 
 
      <input type="radio" id="switch_right" name="contact_style" value="sms"> 
 
      <label for="switch_right">SMS</label> 
 
     </div> 
 
    </div> 
 
</div>

Answer 5

。私は非常に多くのイベントリスナーを追加します。

$('#inputPhone').on('input change keypress key down copy paste cut', function(e){ 
 
    $('#switch_right').prop('checked', ($(this).val()!='')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div class="form-group phone-field row row-eq-height"> 
 
    <div class="col-sm-4"> 
 
     <label for="inputPhone">Phone number (optional)</label> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <div class="form-inline"> 
 
      <div class="form-group"> 
 
       <label class="prepend">+32</label> 
 
       <input type="text" class="form-control" name="phonenumber" id="inputPhone" placeholder="" value=""> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="switch-button row row-eq-height"> 
 
    <div class="col-sm-4"><label for="contact_style">Receive your token by</label></div> 
 
    <div class="col-sm-4"> 
 
     <div class="switch-field clearfix"> 
 
      <input type="radio" id="switch_left" name="contact_style" value="email"> 
 
      <label for="switch_left">EMAIL</label> 
 
      <input type="radio" id="switch_right" name="contact_style" value="sms"> 
 
      <label for="switch_right">SMS</label> 
 
     </div> 
 
    </div> 
 
</div>

Answer 6

はい、それは可能ですが、あなたはそれを行うだろうイベントを処理する必要があります。 キーアップイベントで十分だと思います。

$("#inputPhone").keyup(function(){ 

$("#switch_left").attr("checked", "checked"); 
}); 

Answer 7

私たちが電話番号を入力すると、SMSのラジオを確認する以下のコードを確認してください。我々は、それが可能である

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<script> 
function radio(){ 

    $('#rad').attr("checked", "checked"); 
} 
</script> 
</head> 
<body> 
<form> 
    Phone:<br> 
    <input onkeyup="radio();" id="input" type="text" name="phone"><br> 
    <input type="radio" id ="rad" name="gender" value="sms"> SMS<br> 
</form> 
</body> 
</html>