sCha sCha - 4 months ago 24
PHP Question

radio box checking by javascript NOT working

I've been searching a lot and found out that one of the followings should work:

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


But none of them worked for me.

These are the radio boxes I use.

<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


And I trigger a modal view by using this script

<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
, and
{{ $staff }}
things are there because I use
Laravel
and
Blade
for this project.

And I commented out few lines because they don't work at all.

Interestingly, all other lines for other kinds of input form fields in this code works perfectly, but not those radio boxes.

Is there something i've been missing?

Answer

check the 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;
}

Works just about right