检查单选按钮是否被选中以及值是否匹配

Question

绞尽脑汁想弄明白这个问题。我在 Jquery 方面不是最出色的，但我知道的足够多了。现在我正在尝试开发一些东西来检查组中的单选按钮是否被选中，然后查看它的值是否匹配，以便它可以显示正确的相应部分。我制作了一个接近我的暂存站点设置的粗糙 JSFiddle。

HTML:

<div>
    <label>Oak</label>
    <input type='radio' name="tmcp_radio_0" class='some-class-of-radiogroup' value='Oak_0' checked="checked">

    <label>Brown Maple</label>
    <input type='radio' name="tmcp_radio_0" class='some-class-of-radiogroup' value='Brown Maple_1'>

    <label>Cherry</label>
    <input type='radio' name="tmcp_radio_0" class='some-class-of-radiogroup' value='Cherry_2'>

    <label>Quartersawn White Oak</label>
    <input type='radio' name="tmcp_radio_0" class='some-class-of-radiogroup' value='Quartersawn White Oak_3'>

    <label>Hard Maple</label>
    <input type='radio' name="tmcp_radio_0" class='some-class-of-radiogroup' value='Hard Maple_4'>

    <label>Hickory</label>
    <input type='radio' name="tmcp_radio_0" class='some-class-of-radiogroup' value='Hickory_5'>

    <!-- Many Others... -->
</div>
<div class="stains-container">
  <div class="oak-stains-div">
    <h4>Oak</h4>
    <label>Michael's Cherry</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <label>Rich Tobacco</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <label>Dark Knight</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <!-- Many Others... -->
  </div>
  <div class="b-maple-stains-div">
    <h4>Brown Maple</h4>
    <label>Michael's Cherry</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <label>Rich Tobacco</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <label>Dark Knight</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <!-- Many Others... -->
  </div>
  <div class="cherry-stains-div">
    <h4>Cherry</h4>
    <label>Michael's Cherry</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <label>Rich Tobacco</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <label>Dark Knight</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <!-- Many Others... -->
  </div>
  <div class="qswo-stains-div">
    <h4>QSWO</h4>
    <label>Michael's Cherry</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <label>Rich Tobacco</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <label>Dark Knight</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <!-- Many Others... -->
  </div>
  <div class="h-maple-stains-div">
    <h4>Hard Maple</h4>
    <label>Michael's Cherry</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <label>Rich Tobacco</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <label>Dark Knight</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <!-- Many Others... -->
  </div>
  <div class="hickory-stains-div">
    <h4>Hickory</h4>
    <label>Michael's Cherry</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <label>Rich Tobacco</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

    <label>Dark Knight</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>

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

JS:

jQuery(function ($) {
// Create Variables
    var stains = $(".stains-container");
    // 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");


// Check if a button is pre-selected and if its value matches
var radio_buttons = $("input[name='tmcp_radio_0']");
    if( radio_buttons.is(":checked") && /^Oak_\d$/.test($(this).val())) {
        alert("OAK is selected");
        $(".oak-stains-div").show();
        $oakchecked.prop('checked', false);
        $oakactive.removeClass( "tc-active" );
    } else if( radio_buttons.is(":checked") && /^Brown Maple_\d$/.test($(this).val())) {
        alert("B MAPLE is selected");
        $(".b-maple-stains-div").show();
        $bmaplechecked.prop('checked', false);
        $bmapleactive.removeClass( "tc-active" );
    } else if( radio_buttons.is(":checked") && /^Cherry_\d$/.test($(this).val())) {
        alert("CHERRY is selected");
        $(".cherry-stains-div").show();
        $cherrychecked.prop('checked', false);
        $cherryactive.removeClass( "tc-active" );
    } else if( radio_buttons.is(":checked") && /^Quartersawn White Oak_\d$/.test($(this).val())) {
        alert("QSWO is selected");
        $(".qswo-stains-div").show();
        $qswochecked.prop('checked', false);
        $qswoactive.removeClass( "tc-active" );
    } else if( radio_buttons.is(":checked") && /^Hard Maple_\d$/.test($(this).val())) {
        alert("H MAPLE is selected");
        $(".h-maple-stains-div").show();
        $hmaplechecked.prop('checked', false);
        $hmapleactive.removeClass( "tc-active" );
    } else if( radio_buttons.is(":checked") && /^Hickory_\d$/.test($(this).val())) {
        alert("HICKORY is selected");
        $(".hickory-stains-div").show();
        $hickorychecked.prop('checked', false);
        $hickoryactive.removeClass( "tc-active" );
    } else if( radio_buttons.is(":not(:checked)")) {
        alert("NOTHING is selected");
        $(".stains-container").hide();
    } 
    // Check if Oak is selected or pre-selected
    radio_buttons.on('change',function(){
        if ( /^Oak_\d$/.test($(this).val())) {
            stains.show();
            $(".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())) {
            stains.show();
            $(".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())) {
            stains.show();
            $(".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())) {
            stains.show();
            $(".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())) {
            stains.show();
            $(".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())) {
            stains.show();
            $(".hickory-stains-div").show();
            $hickorychecked.prop('checked', false);
            $hickoryactive.removeClass( "tc-active" );
        } else {
            $(".hickory-stains-div").hide();
        }
    });
});

我的fiddle：https://jsfiddle.net/amishdirect/h94c7rsw/5/

我正在努力处理的部分是让它检查输入是否为 "checked" 以及它的值是否匹配。区域 /^Oak_\d$/.test($(this).val()) 是因为值会根据顺序发生变化（即：Oak_0、Oak_1、Oak_2 等）。无论它在哪里，我都试图让它匹配输入。现在我被卡住了，因为我正在努力让它检查两者和 return 正确的东西。我还要说 JS 很粗糙，很可能可以改进和压缩。这正是我所拥有的，所以我也感谢您提出的任何改进建议！

Answer 1

您可以使用属性选择器。

var oak_checked = $(":radio[value^=oak]").is(":checked");

您的代码不起作用，因为 this 不是选中的按钮。测试 .is(":checked") 不会将 this 的值更改为发现可能被选中的任何按钮。

Answer 2

最好使用更好的 class 名称来帮助选择器。考虑以下因素。

JSFiddle：https://jsfiddle.net/Twisty/zpwc92rv/24/

HTML

<ul class="bases">
  <li>
    <input type='radio' name="tmcp_radio_0" class='top radiogroup' value='oak'>
    <label>Oak</label>
  </li>
  <li>
    <input type='radio' name="tmcp_radio_0" class='top radiogroup' value='b-maple'>
    <label>Brown Maple</label>
  </li>
  <li>
    <input type='radio' name="tmcp_radio_0" class='top radiogroup' value='cherry'>
    <label>Cherry</label>
  </li>
  <li>
    <input type='radio' name="tmcp_radio_0" class='top radiogroup' value='qswo'>
    <label>Quartersawn White Oak</label>
  </li>
  <li>
    <input type='radio' name="tmcp_radio_0" class='top radiogroup' value='h-maple'>
    <label>Hard Maple</label>
  </li>
  <li>
    <input type='radio' name="tmcp_radio_0" class='top radiogroup' value='hickory'>
    <label>Hickory</label>
  </li>
</ul>
<div class="stains">
  <div class="oak stain">
    <h4>Oak</h4>
    <label>Michael's Cherry</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <label>Rich Tobacco</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <label>Dark Knight</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <!-- Many Others... -->
  </div>
  <div class="b-maple stain">
    <h4>Brown Maple</h4>
    <label>Michael's Cherry</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <label>Rich Tobacco</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <label>Dark Knight</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <!-- Many Others... -->
  </div>
  <div class="cherry stain">
    <h4>Cherry</h4>
    <label>Michael's Cherry</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <label>Rich Tobacco</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <label>Dark Knight</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <!-- Many Others... -->
  </div>
  <div class="qswo stain">
    <h4>QSWO</h4>
    <label>Michael's Cherry</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <label>Rich Tobacco</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <label>Dark Knight</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <!-- Many Others... -->
  </div>
  <div class="h-maple stain">
    <h4>Hard Maple</h4>
    <label>Michael's Cherry</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <label>Rich Tobacco</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <label>Dark Knight</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <!-- Many Others... -->
  </div>
  <div class="hickory stain">
    <h4>Hickory</h4>
    <label>Michael's Cherry</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <label>Rich Tobacco</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <label>Dark Knight</label>
    <input type='radio' name="tmcp_radio_1" class='some-class-of-radiogroup' value='value'>
    <!-- Many Others... -->
  </div>
</div>

JavaScript

$(function() {
  function hideAll() {
    $(".stains .stain").hide();
  }

  function uncheckAll() {
    $(".stain input:checked").prop("checked", false);
  }

  hideAll();
  $(".bases input").on("change", function(e) {
    $(".selected").removeClass("selected");
    $(this).parent().addClass("selected");
    var s = $(this).val();
    hideAll();
    uncheckAll();
    $(".stain." + s).show();
  });
  $(".bases input:first").trigger("click");
});

如您所见，隐藏所有项目，然后根据点击的 value 只显示需要的项目会更容易。

检查单选按钮是否被选中以及值是否匹配

Check if Radio Button is Checked and if Value Matches

javascript

jquery

html

radio-button

checked