触发隐藏/显示单选按钮

问题描述 投票:0回答:3

我有两个单选按钮作为图像选择器。我想听听是否检查了第一个单选按钮。如果选中,我希望隐藏另一个单选按钮。

这是我到目前为止所尝试的:

$('input[value="Dwarf.png|25|25"]').on("change", function(){

{
    if ($(this).is(':checked') && $(this).val() == 'Yes') {

        $('input[value="Gnome.png|25|25"]').hide();
        $('body').find('img[src$="./images/imgsel/Gnome.png"]').hide();

}

};

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="pf_faction" id="pf_faction_0" value="Dwarf.png|25|25">
<img src="./images/imgsel/Dwarf.png" width="25" height="25" title="Dwarf" alt="Dwarf">

<input type="radio" name="pf_faction" id="pf_faction_1" value="Gnome.png|25|25">
<img src="./images/imgsel/Gnome.png" width="25" height="25" title="Gnome" alt="Gnome">

但这没有做任何事情。我已经检查过.hide()的东西是通过使用doc ready函数来尝试它,我知道这个位有效,但是无法解决其余的难题。

任何帮助赞赏。

jquery radio
3个回答
0
投票

function(){替换为在检查输入无线电时将触发的一些jQuery事件。

就像是:

$("input[type=radio]").on("change", function(){ //do your logic });

当你在if语句中选择$(this)时,那将不知道this是谁。您需要提供正确的上下文。


0
投票

可以试试这个

// script.js
$(function() {
    $('input[value="Dwarf.png|25|25"]').click(function(){

        $('input[value="Gnome.png|25|25"]').hide();
        $('body').find('img[src$="./images/imgsel/Gnome.png"]').hide();
    })
    $('input[value="Gnome.png|25|25"]').click(function(){
        $('input[value="Dwarf.png|25|25"]').hide();
        $('body').find('img[src$="./images/imgsel/Dwarf.png"]').hide();
    })
});
<!-- HTML  -->
<html>
<head>
<title>jQuery Hello World</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


</head>

<body>


<input type="radio" name="pf_faction" id="pf_faction_0" value="Dwarf.png|25|25">
<img src="./images/imgsel/Dwarf.png" width="25" height="25" title="Dwarf" alt="Dwarf">

<input type="radio" name="pf_faction" id="pf_faction_1" value="Gnome.png|25|25">
<img src="./images/imgsel/Gnome.png" width="25" height="25" title="Gnome" alt="Gnome">

<script src="script.js"></script>
</body>
</html>

0
投票

那是你想要的

$(function() {
 $('input[value="Dwarf.png|25|25"]').on('change', function(e){
    if ($(this).is( ":checked" )) {           
      $('input[value="Gnome.png|25|25"]').hide();
      $('img[src="./images/imgsel/Gnome.png"]').hide();
    }                   
 });
});

但是:ぁzxswい

© www.soinside.com 2019 - 2024. All rights reserved.