动态检查是否使用 Jquery 检查了单选按钮

Question

我正在尝试为我们的网站创建自定义 sn-p。我在 Jquery 方面不是最棒的，但至少知道得足够多。我现在的困境是试图让 Jquery 检查一个单选组是否选中了一个选项，然后为该选项显示正确的相应组。这是我目前拥有的：

jQuery(function ($) {
    // Check if Oak is checked
    var $oakchecked = $("input.b-maple-stains, input.cherry-stains, input.qswo-stains, input.h-maple-stains, input.hickory-stains");
    var $oakactive = $(".b-maple-stains-div li, .cherry-stains-div li, .qswo-stains-div li, .h-maple-stains-div li, .hickory-stains-div li");
    // Check if B. Maple is checked
    var $bmaplechecked = $("input.oak-stains, input.cherry-stains, input.qswo-stains, input.h-maple-stains, input.hickory-stains");
    var $bmapleactive = $(".oak-stains-div li, .cherry-stains-div li, .qswo-stains-div li, .h-maple-stains-div li, .hickory-stains-div li");
    // Check if Cherry is checked
    var $cherrychecked = $("input.oak-stains, input.b-maple-stains, input.qswo-stains, input.h-maple-stains, input.hickory-stains");
    var $cherryactive = $(".oak-stains-div li, .b-maple-stains-div li, .qswo-stains-div li, .h-maple-stains-div li, .hickory-stains-div li");
    // Check if QSWO is checked
    var $qswochecked = $("input.oak-stains, input.b-maple-stains, input.cherry-stains, input.h-maple-stains, input.hickory-stains");
    var $qswoactive = $(".oak-stains-div li, .b-maple-stains-div li, .cherry-stains-div li, .h-maple-stains-div li, .hickory-stains-div li");
    // Check if H. Maple is checked
    var $hmaplechecked = $("input.oak-stains, input.b-maple-stains, input.cherry-stains, input.qswo-stains, input.hickory-stains");
    var $hmapleactive = $(".oak-stains-div li, .b-maple-stains-div li, .cherry-stains-div li, .qswo-stains-div li, .hickory-stains-div li");
    // Check if Hickory is checked
    var $hickorychecked = $("input.oak-stains, input.b-maple-stains, input.cherry-stains, input.qswo-stains, input.h-maple-stains");
    var $hickoryactive = $(".oak-stains-div li, .b-maple-stains-div li, .cherry-stains-div li, .qswo-stains-div li, .h-maple-stains-div li");

    // Hide stains unless a wood is chosen
    var radio_buttons = $("input[name='tmcp_radio_0']");
    if( radio_buttons.filter(':checked').length == 0){
       $(".stains-container").hide();
        } else if( radio_buttons.filter(':checked').length == 1 && /^Oak_\d+$/.test($(this).val())) {
            $(".oak-stains-div").show();
            $oakchecked.prop('checked', false);
            $oakactive.removeClass( "tc-active" );
        } else if( radio_buttons.filter(':checked').length == 1 && /^Brown Maple_\d+$/.test($(this).val())) {
            $(".b-maple-stains-div").show();
            $bmaplechecked.prop('checked', false);
            $bmapleactive.removeClass( "tc-active" );
        } else if( radio_buttons.filter(':checked').length == 1 && /^Cherry_\d+$/.test($(this).val())) {
            $(".cherry-stains-div").show();
            $cherrychecked.prop('checked', false);
            $cherryactive.removeClass( "tc-active" );
        } else if( radio_buttons.filter(':checked').length == 1 && /^Quartersawn White Oak_\d+$/.test($(this).val())) {
            $(".qswo-stains-div").show();
            $qswochecked.prop('checked', false);
            $qswoactive.removeClass( "tc-active" );
        } else if( radio_buttons.filter(':checked').length == 1 && /^Hard Maple_\d+$/.test($(this).val())) {
            $(".h-maple-stains-div").show();
            $hmaplechecked.prop('checked', false);
            $hmapleactive.removeClass( "tc-active" );
        } else if( radio_buttons.filter(':checked').length == 1 && /^Hickory_\d+$/.test($(this).val())) {
            $(".hickory-stains-div").show();
            $hickorychecked.prop('checked', false);
            $hickoryactive.removeClass( "tc-active" );
        } else {
        }
    // Check if Oak is selected or pre-selected
    radio_buttons.on('change',function(){
        if ( /^Oak_\d+$/.test($(this).val())) {
            $(".oak-stains-div").show();
            $oakchecked.prop('checked', false);
            $oakactive.removeClass( "tc-active" );
        }  else {
            $(".oak-stains-div").hide();
        }
    });

    // Check if B. Maple is selected or pre-selected
    radio_buttons.on('change',function(){
        if ( /^Brown Maple_\d+$/.test($(this).val())) {
            $(".b-maple-stains-div").show();
            $bmaplechecked.prop('checked', false);
            $bmapleactive.removeClass( "tc-active" );
        } else {
            $(".b-maple-stains-div").hide();
        }
    });

    // Check if Cherry is selected or pre-selected
    radio_buttons.on('change',function(){
        if ( /^Cherry_\d+$/.test($(this).val())) {
            $(".cherry-stains-div").show();
            $cherrychecked.prop('checked', false);
            $cherryactive.removeClass( "tc-active" );
        } else {
            $(".cherry-stains-div").hide();
        }
    });

    // Check if QSWO is selected or pre-selected
    radio_buttons.on('change',function(){
        if ( /^Quartersawn White Oak_\d+$/.test($(this).val())) {
            $(".qswo-stains-div").show();
            $qswochecked.prop('checked', false);
            $qswoactive.removeClass( "tc-active" );
        } else {
            $(".qswo-stains-div").hide();
        }
    });

    // Check if Hard Maple is selected or pre-selected
    radio_buttons.on('change',function(){
        if ( /^Hard Maple_\d+$/.test($(this).val())) {
            $(".h-maple-stains-div").show();
            $hmaplechecked.prop('checked', false);
            $hmapleactive.removeClass( "tc-active" );
        } else {
            $(".h-maple-stains-div").hide();
        }
    });

    // Check if Hickory is selected or pre-selected
    radio_buttons.on('change',function(){
        if ( /^Hickory_\d+$/.test($(this).val())) {
            $(".hickory-stains-div").show();
            $hickorychecked.prop('checked', false);
            $hickoryactive.removeClass( "tc-active" );
        } else {
            $(".hickory-stains-div").hide();
        }
    });
});

我的想法是首先检查该无线电组是否已被选中，如果是，请检查选择了哪个选项，然后显示正确的部分。如果没有，将其隐藏，直到选择一个选项。然后，如果有人要去并选择一个不同的选项去显示正确的组。

目前选择不同的组部分很好。可能可以做得更好，但现在它可以工作。我的挂断是让它检查一个选项是否已经被选中，然后显示正确的组。

对此的任何帮助都会令人惊叹。如果有人对如何使其正常工作有任何想法，我将不胜感激。谢谢大家！

编辑：如果这有帮助，我已经 added the link to our staging site 了解我正在使用的内容。这个想法是当木材选择木材时，它将显示那些树林的“精加工”下的正确污渍。现在我已经在我们的“adf-scripts.js”文件下注释掉了隐藏的污渍。

Answer 1

当你有许多相同类型的东西或属于一个共同的父对象时，你可以对它们进行交互。

让我们想象一组特定的收音机，我想检查是否至少检查了一个（当您有未初始化的收音机并希望防止空白提交时非常有用）。

<div>
    <label>My Radio1</label>
    <input type='radio' name="my-radio" class='some-class-of-radiogroup' value='my-radio1'>

    <label>My Radio2</label>
    <input type='radio' name="my-radio" class='some-class-of-radiogroup' value='my-radio2'>

    <label>My Radio3</label>
    <input type='radio' name="my-radio" class='some-class-of-radiogroup' value='my-radio3'>

    <!-- Many Others... -->
</div>

// flag will tell to our promise if any radio 
//is checked if evaluated to 'true'
let flag = false;

//here you can also use '.some-class-of-radiogroup' as selector

//each iterator is a cool way to performe one to one verification on group of 
//inputs, elements....
// inside each callback you are in element's context so you can refers to it
// with $(this) and will assume current iteracted element

$("[name='my-radio']").each(function(){

    //check if current radio is checked or not
    flag = $(this).is(":checked"); // yeah only returns True or false
}).promise().done(function(){

    //above is an important thing to do '.promise().done...'
    //each is an asynchronous function so compare flag outside
    // may not work well but inside done's callback everything works well

    // here is where you decide wht to do.
    if(flag){
        alert("Some is checked")
    } else {
        alert("No radio are checked yet");
    } 
})

Answer 2

您可以创建一个数组来记下每个选中的复选框 id（首先您需要找到一种方法来为单选按钮中的每个选项设置一个 id）。

然后在checked函数返回false的情况下，选中的单选按钮id被写入数组中，如果返回true，则选中的单选按钮id从数组中删除。

这就是它背后的逻辑。我试过了，它对我有用很多次。 干得好