如果输入有值,则应该选中特定的单选按钮

If an input has a value, specific radio button should be checked

本文关键字:单选按钮 输入 如果      更新时间:2023-09-26

我想检查输入(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>

还有其他的方法,但这应该让你开始:

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

这是基于你的html,其中输入名称='companyname'也有id 'inputCompanyName',并将清除其他电台,因为他们有相同的name=


编辑工作jsfiddle: https://jsfiddle.net/76x42os0/4

更改代码框(左上角)中的输入值,并单击"运行"。

更新:更新到指定的jquery 3.1.0版本,并发现新版本的jquery 需要 id=匹配#,而之前它匹配的是name=

如果您想在输入更改时检查它,您可以

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

您可以优化代码,但这是更可读的

如果你需要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;
}

这是一个工作示例,说明您所追求的内容(尽管没有考虑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('change', function(){

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

使它在响应性方面稍微"好一点"。

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

,这里有一个版本,也有你的ID名。

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