Javascript 如何获得两个单选按钮选择以在jquery中显示1个div

我对jQuery脚本有一个开发问题。我试着找到一些可以改变目的的东西，但却找不到我真正需要的东西。所以我试着写了一些东西，但还没有让它正常工作，我是一个新手，似乎无法理解它

我试图让2个单选按钮（第一组3个，第二组2个）在选择两个单选按钮时返回6个div标记中的1个

我只写了足够的脚本，无论是销售还是支持选项

html:

这里是fiddle链接：

---

这并不漂亮，但是如果您使用

数据属性

而不是

id

，那么您可以大大简化代码：

$(document).ready(function () {    
    $("div[data-cats]").hide();    
    $("input[name=button1], input[name=button2]").change(function () {
        var b1 = $('input[name=button1]:checked').val();
        var b2 = $('input[name=button2]:checked').val();
        $("div[data-cats]").hide();        
        $("div[data-cats='"+b1+" "+b2+"']").show();       
    });
});

---

我胡思乱想，找到了这个解决方案。 请记住，我在您更换的div周围添加了一个div容器

---

如果您设置jQuery并使用jsfiddle:man开头，这肯定会有所帮助，因为这段代码太乱了。一个提示：在“change”函数中，您没有检查刚刚单击的元素。您正在检查元素。你同意我，你有三个按钮，对吗？jQuery只提供了这些元素中的第一个。因为你是这样选择的。结果总是临床的，因为它是第一个元素，jQuery对此很满意（并且工作正常）。非常感谢。相信我，我可能有一段时间是对的，我看了那么多代码，试图使用已经编写好的代码，只是胡乱摆弄，我可能把实际正确的内容写得太多了。非常感谢你，这一直在折磨着我。你是一个救命恩人。谢谢你的帮助。

$(document).ready(function () {
    $("#Clinical-Support").hide();
    $("#Clinical-Sales").hide();
    $("#Financial-Support").hide();
    $("#Financial-Sales").hide();
    $("#Pharmacy-Support").hide();
    $("#Pharmacy-Sales").hide();

    $("#optSelectBU").change(function () {
        if ($('input[name=button1]').val() == "clinical" && $('input[name=button2]').val() == "sales") {
            $("#Clinical-Sales").show();
        } else {
            $("#Clinical-Support").hide();
            $("#Clinical-Sales").hide();
            $("#Financial-Support").hide();
            $("#Financial-Sales").hide();
            $("#Pharmacy-Support").hide();
            $("#Pharmacy-Sales").hide();
        }
    });
    $("#optSelectBU").change(function () {
        if ($('input[name=button1]').val() == "clinical" && $('input[name=button2]').val() == "support") {
            $("#Clinical-Support").show();
        } else {
            $("#Clinical-Support").hide();
            $("#Clinical-Sales").hide();
            $("#Financial-Support").hide();
            $("#Financial-Sales").hide();
            $("#Pharmacy-Support").hide();
            $("#Pharmacy-Sales").hide();
        }
    });
});

$(document).ready(function () {    
    $("div[data-cats]").hide();    
    $("input[name=button1], input[name=button2]").change(function () {
        var b1 = $('input[name=button1]:checked').val();
        var b2 = $('input[name=button2]:checked').val();
        $("div[data-cats]").hide();        
        $("div[data-cats='"+b1+" "+b2+"']").show();       
    });
});

$(document).ready(function () {
$("#container > div").hide();

var input1, input2;

function checkboxChecker() {
    if ( input1 === "clinical" && input2 === "sales" ) {
        $("#Clinical-Sales").show().siblings("div").hide();
    } else if ( input1 === "clinical" && input2 === "support" ) {
        $("#Clinical-Support").show().siblings("div").hide();
    } else {
        $("#container > div").hide();
    }
};

$("input[name=button1], input[name=button2]").change(function () {
    input1 = $('input[name=button1]:checked').val();
    input2 = $('input[name=button2]:checked').val();
    checkboxChecker();
});
});