隐藏/显示单选按钮的触发器答案

【问题标题】：Trigger for hiding/showing radio buttons隐藏/显示单选按钮的触发器
【发布时间】：2019-08-24 19:27:02
【问题描述】：

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

这是我迄今为止尝试过的：

$('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">

但这并没有做任何事情。我已经通过使用 doc ready 函数尝试检查 .hide() 东西是否正常工作，我知道该部分有效，但无法解决剩下的难题。

任何帮助表示赞赏。

【问题讨论】：

我将代码放入一个可执行文件中，您可以在其中看到至少有一个语法错误，这是由内部function() { 引起的。这需要删除，因为它不需要，如果它起作用，将阻止其中的代码被执行。
感谢@RoryMcCrossan，我已将其删除。但是仍然无法正常工作。请参阅我更新的原始帖子。

标签： jquery radio

【解决方案1】：

将function(){ 替换为一些 jQuery 事件，该事件将在检查输入单选时触发。

类似：

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

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

【讨论】：

我确实为它提供了上下文 - 'this' 指的是 dwarf 输入。

【解决方案2】：

可以试试这个

// 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>

【讨论】：

【解决方案3】：

这是你想要的

$(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();
    }                   
 });
});

演示：https://jsbin.com/cateyusawa

【讨论】：

嘿 ryan，谢谢，但这并不能解决我的问题。我想按 ID 隐藏特定的单选按钮，而不是最近的。
您说：如果选中，我希望隐藏其他单选按钮。那么你想要隐藏 "$('input[value="Gnome.png|25|25"]')" 吗？
是的 ^ 我希望专门隐藏该输入。