我已经在我创建的一些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();
});
这似乎完美无缺,谢谢!
答案 0 :(得分:2)
在change
事件中使用,然后使用if ($("input[name='FIELD7']").is(":checked"))
<强> JS 强>
$("input[name='FIELD7']").on("change", function() {
if ($("input[name='FIELD7']").is(":checked"))
$("#weapons").show();
});
在看到您最近的评论后,我添加了更新:
$("input[name='FIELD7']").on("change", function() {
if ($(this).is(":checked") && $(this).val() == 'Yes')
$("#weapons").show();
});
选择否时更新,然后隐藏:
$(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;
}
答案 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();
});
这似乎完美无缺,谢谢!