仅当选择了特定组的单选按钮中的至少一个时才显示图像

Question

我有一些单选按钮。让我们为他们命名 A1 B1 A2 B2 C2 A3 B3 A4 C4

我希望仅在选择至少一个B单选按钮时才显示图像。

测试用例：
单击B1 B2 - 显示图像
A1 A2 B3点击 - 显示图像
单击A1 A3 - 不显示图像

我试过了什么？ 我试图保持点击属于单选按钮组B的单选按钮的计数，并在该计数大于1时显示图像 我是jquery的新手，这个解决方案看起来很脏。

还有其他好的解决方案吗？

更新： 我忘了提到页面上可能有未知数量的B单选按钮。

Angel Politis为未知数量的B提供的答案不会起作用.attr（）只获得匹配元素集中第一个元素的属性值。

Answer 1

定期检查就足够了。尝试以下几点：

<强> JavaScript的：

var
    B1 = document.getElementById("B1"),
    B2 = document.getElementById("B2"),
    img = document.getElementById("image-id"),
    rad = document.getElementByClassName("radiobuttons-class"); // Class of all the buttons

for (var i = 0; i < rad.length; i++) {
    rad[i].onchange = function() {
        if (B1.checked || B2.checked) {
            img.style.display = "inline-block"; // Or whatever you want it to be
        }
        else {
            img.style.display = "none";
        };
    };
};

if/else 检查也可以缩短为：

img.style.display = (B1.checked || B2.checked) ? "inline-block" : "none";

<强> jQuery的：

$(".radiobuttons-class").on("change", function() {
    if($("#B1").attr(checked) || $("#B2").attr(checked)) {
        $("#image-id").css("display", "inline-block");
    }
    else {
        $("#image-id").css("display", "none");
    }
});

修改

对于未知数量的 B 元素，您可以使用以下代码，前提是您已为所有 B <设置了相同的类名/ strong>元素：

<强> JavaScript的：

var
    img = document.getElementById("image-id"),
    arrayOfElements = document.getElementsByClassName("B"),
    rad = document.getElementByClassName("radiobuttons-class");

for (var a = 0; a < rad.length; a++) {
    rad[a].onchange = function() {
        for (var b = 0; b < arrayOfElements.length; b++) {
            if (arrayOfElements[b].checked) {
                img.style.display = "inline-block";
                break;
            }
            else {
                img.style.display = "none";
            };
        };
    };
};

<强> jQuery的：

$(".radiobuttons-class").on("change", function() {
    $(".B").each(function() {
        if($(this).attr(checked)) {
            $("#image-id").css("display", "inline-block");
            return false; /* Break out of the loop */
        }
        else {
            $("#image-id").css("display", "none");
        }
    });
});