Question

我有两个单选按钮，它们用作图像选择器。我想听听是否选中了第一个单选按钮。如果选中，我希望其他单选按钮被隐藏。

这是我到目前为止尝试过的：

$('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（）东西是否正常工作，而且我知道一点点都可以，但是无法解决其余的难题。

任何帮助表示赞赏。

Answer 1

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

类似的东西：

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

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

Answer 2

那是你想要的

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

Answer 3

可以尝试

// 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 个答案: