jQuery没有显示元素?

时间:2015-08-20 05:28:25

标签: jquery html

我已经在我创建的一些HTML元素上使用了.hide(),并希望一旦该人检查我创建的单选按钮中的Yes选项,就会显示它们。我的jQuery如下

if (document.querySelector('input[name="FIELD7"]:checked').value == "Yes") {
    $("#weapons").show();
    $("#weaponfield").show();
    $("#weaponfield2").show();
    $("#weaponfield3").show();
    $("#weaponfield4").show();
}

出于某种原因,当我选择“是”选项时,元素将不会.show();

有人吗?

更新
我设法解决了整个问题。我很感激那些试图帮助我的人!我已经创建了自己的修复程序,因为没有其他方法工作。我为每个输入分配了一个ID,只是调用了ID来隐藏在点击功能上,非常简单,哈哈! 这是我的jQuery:

            $("#weaponyes").click(function() {
                $("#weapons").show();
                $("#weaponfield").show();
                $("#weaponfield2").show();
                $("#weaponfield3").show();
                $("#weaponfield4").show();
            });

            $("#weaponno").click(function() {
                $("#weapons").hide();
                $("#weaponfield").hide();
                $("#weaponfield2").hide();
                $("#weaponfield3").hide();
                $("#weaponfield4").hide();
            });

这似乎完美无缺,谢谢!

4 个答案:

答案 0 :(得分:2)

change事件中使用,然后使用if ($("input[name='FIELD7']").is(":checked"))

检查是否正在检查输入广播

<强> JS

$("input[name='FIELD7']").on("change", function() {
    if ($("input[name='FIELD7']").is(":checked"))
      $("#weapons").show();
}); 

Fiddle

在看到您最近的评论后,我添加了更新:

$("input[name='FIELD7']").on("change", function() {
    if ($(this).is(":checked") && $(this).val() == 'Yes')
      $("#weapons").show();
});

Fiddle

选择否时更新,然后隐藏:

$(function() {
    $("input[name='FIELD7']").on("change", function() {
        if ($(this).is(":checked") && $(this).val() == 'Yes')
          $("#weapons").show();
        else
          $("#weapons").hide();  
    });   
});

CSS

默认隐藏元素。

#weapons, 
#weaponfield,
#weaponfield2,
#weaponfield3,
#weaponfield4 {
  display: none;
}

Fiddle

答案 1 :(得分:1)

你也可以使用。它应该会帮助你。对我来说它确实

 if ($("input[name='FIELD7']").is(":checked")){

    $("#weapons").show();
    $("#weaponfield").show();
    $("#weaponfield2").show();
    $("#weaponfield3").show();
    $("#weaponfield4").show();
}

答案 2 :(得分:0)

使用简单的条件

var a=document.querySelector('input[name="FIELD7"]:checked');

现在在您的代码中,您可以检查您的情况

if(a!=null)
    {
        if (document.querySelector('input[name="FIELD7"]:checked').value == "Yes") 
        {
            $("#weapons").show();
        }
    }

答案 3 :(得分:0)

我设法修复了整个问题。我很感激那些试图帮助我的人!我已经创建了自己的修复程序,因为没有其他方法工作。我为每个输入分配了一个ID,只是调用了ID来隐藏在点击功能上,非常简单,哈哈! 这是我的jQuery:

            $("#weaponyes").click(function() {
                $("#weapons").show();
                $("#weaponfield").show();
                $("#weaponfield2").show();
                $("#weaponfield3").show();
                $("#weaponfield4").show();
            });

            $("#weaponno").click(function() {
                $("#weapons").hide();
                $("#weaponfield").hide();
                $("#weaponfield2").hide();
                $("#weaponfield3").hide();
                $("#weaponfield4").hide();
            });

这似乎完美无缺,谢谢!