當表單中的特定輸入字段不為空時如何更改單選按鈕選擇

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

這絕對是合理的-但從設計的角度來說，我只是說輸入電話號碼並不意味着我希望在那兒得到我的交付物;）

這是一個使用jQuery的有效示例-它不考慮驗證，因為這是一個全新的問題。

https://jsfiddle.net/hepuu2kh/

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

您可以將事件從“更改”切換為“輸入”，以在更改文本字段時進行即時更新。

Answer 2

您可以檢查輸入的值是否不為空，並設置單選按鈕的值：

 $(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 3

我想這不可能比這更簡單。 我添加了很多事件監聽器。

 $('#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 4

只需為input添加event handler ，然后根據是否存在值決定檢查是否必須checked無線電。 我附加了input event handling以便它也標識copy/paste 。

 $(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 5

是的，這是可能的，但是您必須處理一個將要完成的事件。 我相信一個keyup事件就足夠了。

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

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

Answer 6

請檢查下面的代碼，當我們輸入電話號碼時，它將檢查短信廣播。 我們使用onkeyup來更新單選按鈕。

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