ラジオボックス

Question

を働いていないのjavascriptでチェック私は多くのことを検索し、以下のいずれかが動作する必要があることが判明しました：

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を使用してモーダルビューをトリガし、私はこのプロジェクトのためにLaravelとBladeを使用しているため{{ $staff }}ものがあります。

そして、私はいくつかの行が全く機能しないのでコメントしました。

興味深いことに、このコードの他の種類の入力フォームフィールドの他のすべての行は完全に機能しますが、ラジオボックスは機能しません。

紛失したことがありますか？

Answer 1

チェック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; 
} 

作品は、ちょうど約右