CODEWITHSUNDEEP
javascriptjqueryhtmlradio-buttonchecked
ADF
ADF

Reputation: 41

Check if Radio Button is Checked and if Value Matches

Wracking my brain trying to figure this out. I'm not the greatest with Jquery but know enough to kinda get by. Right now I am trying to develop something that will check if a radio button in a group is checked and then to see if its value matches so it can then show the correct corresponding section. I have a crude JSFiddle made that is close to my staging site's set up.

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

My fiddle: https://jsfiddle.net/amishdirect/h94c7rsw/5/

The section I am struggling with is having it check if an input is "checked" AND if its value matches. The area /^Oak_\d$/.test($(this).val()) is because depending on the order the value changes (IE: Oak_0, Oak_1, Oak_2, etc). I'm trying to it match the input no matter where it is. Right now I am stuck because I'm struggling to have it check for both and return the correct stuff. I will also say the JS is crude and most likely can be improved and condensed. This is just what I have so I am thankful for any suggestions to improving it as well!

Upvotes: 0

Views: 685

Answers (2)

Twisty
Twisty

Reputation: 30893

It might be better to use a bit better class names to help selectors. Consider the following.

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

As you can see, it can be easier to hide all the items, and then show just the needed items based on the value that is clicked upon.

Upvotes: 0

Barmar
Barmar

Reputation: 780984

You can use an attribute selector.

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

Your code doesn't work because this is not the checked button. Testing .is(":checked") doesn't change the value of this to whatever button that found that might be checked.

Upvotes: 1

Related Questions