入力に値がある場合、特定のラジオボタンをチェックする必要があります

Question

入力（name="companyname"）に値があるかどうかをチェックしたい場合は、ラジオボタン（id="Zakelijk"）をチェックする必要があります。値がない場合は、他のラジオボタン（id="Particulier"）をチェックする必要があります。

は私の現在のコードを参照してください：

<script type="text/javascript"> 
     function ShowHideDiv() { 
      var chkYes = document.getElementById("Zakelijk"); 
      var dvPassport1 = document.getElementById("checkzakelijk"); 
      var dvPassport2 = document.getElementById("checkzakelijk1"); 
      var dvPassport3 = document.getElementById("checkzakelijk2"); 
      var display = chkYes.checked ? "block" : "none"; 
      dvPassport1.style.display = display; 
      dvPassport2.style.display = display; 
      dvPassport3.style.display = display; 
     } 
    </script> 

    <div class="col-md-12 check-business"> 
     <div class="form-group form-group-xl"> 
      <label for="Particulier"><input type="radio" id="Particulier"checked="checked" name="checkzakelijk" onclick="ShowHideDiv()" />Particulier</label> 
      <label for="Zakelijk"><input type="radio" id="Zakelijk" name="checkzakelijk" onclick="ShowHideDiv()" />Bedrijf</label> 
     </div> 
    </div> 

    <div class="col-md-12" id="checkzakelijk" style="display:none;"> 
     <div class="form-group"> 
      <label for="inputCompanyName" class="control-label">{$LANG.clientareacompanyname}</label> 
      <input type="text" name="companyname" id="inputCompanyName" value="{$clientcompanyname}"{if in_array('companyname', $uneditablefields)} disabled="disabled"{/if} class="form-control" /> 
     </div> 
    </div> 

Answer 1

あり、他の方法がありますが、これはあなたが軌道に乗る必要があります：あなたのhtmlに

$(function() { 
    if (($("#inputCompanyName").val() || "") != "") 
    { 
     $("#Zakelijk").prop("checked", true) 
    } else { 
     $("#Particulier").prop("checked", true) 
    } 
}); 

これをベースとした場合、入力名も=「会社名」同じIDを持つため、他のラジオをクリアします。name=

---

編集作業中：https://jsfiddle.net/76x42os0/4

コードボックス（左上）に入力値を変更して実行をクリックします。

更新：それは名前に一致する前にしながら、あなたがそれを確認したい場合は=、

Answer 2

を示したjqueryのバージョン3.1.0にバイオリンを更新し、＃を一致させる IDを=必要のjQueryの新しいバージョンを発見しました入力が変更されたときに行うことができます

$("input[name='companyname']").change(function(){ 
     var hasValue = $(this).val() === ""; 
     $("#Zakelijk").prop("checked", hasValue); 
     $("#Particulier").prop("checked", !hasValue); 

}) 

あなたはコードを最適化することができますが、これはより読みやすくなります。

Answer 3

ここでは、HTML ID /レイアウトを念頭に置いていますが、その中のIDを変更するだけで、後の作業の例を示します。

$("#text-box").on('change', function(){ 
    if($(this).val() != ""){ 
    $('#rd1').prop("checked", true) 
    }else{ 
    $('#rd2').prop("checked", true) 
    } 
}); 

https://jsfiddle.net/bm18hmLa/3/

それは、テキストボックスの値が変更されるたびに発生するので、それは、変更されたイベントにフック。思考の後

：

$("#text-box").on('input', function(){ 

に

$("#text-box").on('change', function(){ 

を変更

は、応答性の面で、それは少し "よりよい" ことができます。

https://jsfiddle.net/bm18hmLa/5/

、ここでは、あまりにもあなたのID名とバージョンです。

https://jsfiddle.net/bm18hmLa/6/

Answer 4

はケースでは、JavaScript

if(document.getElementById("inputCompanyName").value !== ""){ 
    document.getElementById("Zakelijk").checked = true; 
    document.getElementById("Particulier").checked = false; 
} 
else{ 
    document.getElementById("Particulier").checked = true; 
    document.getElementById("Zakelijk").checked = false; 
}