通过javascript检查的单选框不起作用

radio box checking by javascript NOT working

本文关键字：单选框 不起作用 检查 javascript 通过      更新时间：2023-09-26

我一直在搜索，发现以下方法之一应该有效：

document.getElementById("inlineRadio1_gender").click();
$("#inlineRadio1_gender").prop("checked", true);
document.getElementById("inlineRadio1_gender").checked = true;

但他们都不适合我。

这些是我使用的收音机盒。

<input type="radio" name="inlineRadioOptions_gender" id="inlineRadio1_gender" value="option1" checked="checked"> Male
<input type="radio" name="inlineRadioOptions_gender" id="inlineRadio2_gender" value="option2"> Female

我使用此脚本触发模态视图

<script>
function td_Onclick(tr_object) {
    var input_staff_name = document.getElementById("staff_name");
    var input_staff_birthday = document.getElementById("staff_birthday");
    //var input_staff_men = document.getElementById("inlineRadio1_gender");
    //var input_staff_women = document.getElementById("inlineRadio2_gender");
    var input_staff_phone = document.getElementById("staff_phone");
    var input_staff_cellphone = document.getElementById("staff_cellphone");
    var input_staff_email = document.getElementById("staff_email");
    var input_staff_zip = document.getElementById("sample2_postcode");
    var input_staff_address = document.getElementById("sample2_address");
    var input_staff_address_ext = document.getElementById("sample2_address2");
    var input_staff_date_join = document.getElementById("staff_date_join");
    var input_staff_salary = document.getElementById("staff_salary");
    var input_staff_mainjob = document.getElementById("staff_mainjob");
    //document.getElementById("inlineRadio1_gender").click();
    //$("#inlineRadio1_gender").prop("checked", true);
    //document.getElementById("inlineRadio1_gender").checked = true;
    //document.getElementById("inlineRadio2_gender").checked = false;
    @foreach($staffList as $staff)
        if( tr_object.id == {{ $staff['id'] }} )
        {
            input_staff_name.value = '{{ $staff['name'] }}';
            input_staff_birthday.value = '{{ $staff['birthday'] }}';
            input_staff_cellphone.value = '{{ $staff['cell']}}';
            input_staff_phone.value = '{{ $staff['phone']}}';
            input_staff_email.value = '{{ $staff['email']}}';
            input_staff_zip.value = '{{ $staff['zip']}}';
            input_staff_address.value = '{{ $staff['address']}}';
            input_staff_address_ext.value = '{{ $staff['address_ext']}}';
            input_staff_date_join.value = '{{$staff['date_join2']}}';
            input_staff_salary.value =  '{{$staff['salary']}}';
            input_staff_mainjob.value = '{{$staff['task']}}';
            /*
            if('{{$staff['gender']}}' == 'female'){
                document.getElementById("inlineRadio1_gender").checked = false;
                document.getElementById("inlineRadio2_gender").checked = true;
            }
            else if('{{$staff['gender']}}' == 'male'){
                document.getElementById("inlineRadio2_gender").checked = false;
                document.getElementById("inlineRadio1_gender").checked = true;
            }
            */
        }
    @endforeach
    $('#add_staff').modal('show');
}
</script>

@foreach，{{ $staff }}东西都在那里，因为我在这个项目中使用了Laravel和Blade。

我注释掉了几行，因为它们根本不起作用。

有趣的是，此代码中其他类型的输入表单字段的所有其他行都可以完美运行，但那些单选框则不然。

我错过了什么吗？

检查 jsfiddle

.HTML

<input type="radio" name="gender" id="gender1" value="option1"> Male
<input type="radio" name="gender" id="gender2" value="option2"> Female
<p id="demo1"></p>
<p id="demo2"></p>
<button onclick="showVal()">Show Value</button>
<button onclick="getVal()">Get Value</button>

.JS

function showVal() {
  if (document.getElementById("gender2").checked) {
    document.getElementById("demo1").innerHTML = "Female";
  } else {
    document.getElementById("demo1").innerHTML = "Male";
  }
}
function getVal() {
  var val = document.getElementById("gender2").value;
  document.getElementById("demo2").innerHTML = val;
}

工作得恰到好处

相关文章：