Question

我是javascript的新手，我正在寻找文件就绪功能中的其他功能

我的HTML代码是

<form>
  <input type="radio" name="hanu" id="Male" value="1" checked/> Male
  <input type="radio" name="hanu" id="Female" value="2" /> Female
</form>

现在正在寻找我们可以运行的javascript，如果我们选择男性需要执行一些更改功能，如果我们选择女性需要执行其他更改功能

if (document.getElementById('Male').checked){
//some first change function
} else {
//some second change function
}

现在我能够获得第一次更改功能的问题无法进行第二次更改功能

Answer 1

问题是因为document.ready处理程序仅在页面生命周期中执行一次（在加载时）。因此，当您更改的复选框时，没有Javascript侦听。你应该挂钩change事件来做到这一点。试试这个：

$(function() {
    $(':checkbox').change(function() {
        if ($(this).val() == '1') { 
            // Male selected, do something...
        } else {
            // Female selected, do something else...
        }
    }).change(); // trigger a change so this code also runs on load
});

:checkbox选择器对于您的实际生产代码可能过于通用，我只是以它为例。我建议你把它改成更具体的东西，或者使用一个类。

Answer 2

Rory提出的方法是完全有效的。这是使用Jquery的另一种方法。我每次点击选项都会调用这些函数。

$(document).ready(function(){
  $("#Male").on('click',function(){
    alert("Male");
  });
  $("#Female").on('click',function(){
    alert("Female");
  });
  });

这是一个有效的demo

或者，您也可以使用Rory指出的更改函数类。

<强> HTML

<input type="radio" class="gender" name="hanu" id="Male" value="1" checked/> Male
<input type="radio" class="gender"  name="hanu" id="Female" value="2" /> Female

<强> JQuery的

 $(".gender").on('change',function(){
    alert("changed");
  });

这是一个有效的demo

Answer 3

只有在第一次加载页面时才会调用

agent_id以便一次又一次地获取它，你应该将它转移到document.ready以外的函数。

Answer 4

问题是你的代码只执行一次。

您需要绑定元素的更改事件：

$(document).ready(function () {
    $('input[type="radio"]').change(function () {
        if ($(this).is(':checked') && $(this).attr('id') == 'Male') {
            //do something
        } else if ($(this).is(':checked') && $(this).attr('id') == 'Female') {

        }
    });
})

Answer 5

这可以让你在没有JQuery的情况下实现这个想法：

document.getElementById('Male').onclick = function(){
alert('male clicked!');
}

你将元素的onclick事件绑定到一个警告字符串的javascript函数......

Answer 6

纯javascript解决方案，我强烈建议使用表单事件，不输入，给它起个名字，添加事件监听器

＆＃13;

document.myform.onchange = function(event){
  alert(event.target.value);
}

＆＃13;

<form name="myform">
  <input type="radio" name="hanu" id="Male" value="1" checked/> Male
  <input type="radio" name="hanu" id="Female" value="2" /> Female
</form>

＆＃13;

Javascript if if in document ready function

6 个答案: