Question

我正在尝试为我们的网站创建一个自定义代码段。我不是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

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

然后，如果选中的函数返回false，则将选中的单选按钮ID写入数组，如果返回true，则从数组中删除选中的单选按钮ID。

这就是背后的逻辑。我尝试过，它为我工作了很多次。做得好

Answer 2

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

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

<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");
    } 
})

动态检查是否已通过Jquery检查单选按钮

2 个答案: