Jquery hide div based on input check value

Question

I am trying to hide a div based on a input check value. Also it should work if the item is already checked, so far my code is not working. As the div I want to hide always shows? I have created a JS Fiddle to replicate the issue

The code is as follows:

var test = $("input[value='home']");

if (test == true) {
  $(".title").hide();
} else {
  $(".title").show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div role="radiogroup">
  <input type="radio" name="gender" value="home" checked> Male
  <br>
  <input type="radio" name="gender" value="female"> Female
  <br>
  <input type="radio" name="gender" value="other"> Other
  <br />
  <br />
  <div class='title'>
    This is the title not on home value
  </div>
</div>

Any input would be great.

`if (test == true)` will always be true. You want to check the checked state — j08691, Sep 25 '19 at 13:55
Possible duplicate of [How to use radio on change event?](https://stackoverflow.com/questions/13152927/how-to-use-radio-on-change-event) — WOUNDEDStevenJones, Sep 25 '19 at 14:11

score 3 · Answer 1 · answered Sep 25 '19 at 14:14

You can do it with CSS only:

input[name="gender"][value="home"]:checked ~ div.title {
  display: none;
}

<input type="radio" name="gender" value="home" checked> Male
<br>
<input type="radio" name="gender" value="female"> Female
<br>
<input type="radio" name="gender" value="other"> Other
<br />
<br />
<div class='title'>
    This is the title not on home value
</div>

score 2 · Accepted Answer · answered Sep 25 '19 at 14:02

check for if there are any inputs with the home value that are checked:

// hide show title on load
if ($("input[value='home']:checked").length) {  // can use :checked selector to see if input with value of home is checked (see link above)
  $(".title").hide();
} else {
  $(".title").show();
}

$("input").on('change', function() {             // hide or show title on change of input (probably use a class here instead of a bare input selector)
  if (this.value === "home" && this.checked) {
    $(".title").hide();                          // hide title if value is home and checkbox is checked
  } else {
    $(".title").show();                          // otherwise show title
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div role="radiogroup">
  <input type="radio" name="gender" value="home" checked> Male
  <br>
  <input type="radio" name="gender" value="female"> Female
  <br>
  <input type="radio" name="gender" value="other"> Other
  <br />
  <br />
  <div class='title'>
    This is the title not on home value
  </div>

score 1 · Answer 3 · answered Sep 25 '19 at 14:04

Try this. First on ready function check if the input is checked. And then check on input change function.

$(document).ready(function() {
    var test = $("input[name='gender']");
    var home = $("input[value='home']")[0];
    var title = $(".title");
    if(home.checked) {
        title.hide();
    }

    test.on('change', function(e) {
        if(e.target.value === 'home') {
        title.hide();
      } else {
        title.show();
      }
    })
});

score 1 · Answer 4 · answered Sep 25 '19 at 14:06

Duplicate of If Radio button checked show div

Here is the adapted code for your case:

$('input[type="radio"]').click(function(){
    if($(this).attr("value")=="home"){
        $(".title").hide('slow');
    }
    else{
       $(".title").show('slow');
    }  
});
$('input[type="radio"]').trigger('click');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div role="radiogroup">
    <input type="radio" name="gender" value="home" checked> Male
    <br>
    <input type="radio" name="gender" value="female"> Female
    <br>
    <input type="radio" name="gender" value="other"> Other
    <br />
    <br />
    <div class='title'>
        This is the title not on home value
    </div>
</div>

WOUNDEDStevenJones · Answer 5 · 2019-09-25T14:13:05.617

You need to add an event listener for the radio group, and then get the value of the checked option. Additionally, you likely want to run it once on page load which is what the .change() on the last line does.

//run this anytime a radio input changes
$('input[name="gender"]').on('change', function() {
    //get the currently selected value
    let test = $('input[name="gender"]:checked').val();

    //check the current value
    if (test == 'home') {
        $(".title").hide();
    } else {
        $(".title").show();
    }
}).change(); //trigger this on page load

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div role="radiogroup">
    <input type="radio" name="gender" value="home" checked> Male
    <br>
    <input type="radio" name="gender" value="female"> Female
    <br>
    <input type="radio" name="gender" value="other"> Other
    <br />
    <br />
    <div class='title'>
        This is the title not on home value
    </div>
</div>

Jquery hide div based on input check value

5 Answers5