通过javascript无线电盒检查不工作

时间:2016-07-11 03:28:19

标签: javascript php jquery html

我一直在搜索,发现以下其中一项应该有效:

<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和{{1}}。

我评论了几行,因为它们根本不起作用。

有趣的是,此代码中其他类型的输入表单字段的所有其他行都可以正常工作,但不是那些无线电盒。

我有什么遗失的吗?

1 个答案:

答案 0 :(得分:0)

检查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;
}

工作正常