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
– j08691, Commented Sep 25, 2019 at 13:55

Guillermo Gutiérrez · Accepted Answer · 2019-09-25 14:14:15Z

3

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>

answered Sep 25, 2019 at 14:14

Guillermo Gutiérrez

18k18 gold badges93 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pete · Accepted Answer · 2019-09-25 14:02:08Z

2

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>

answered Sep 25, 2019 at 14:02

Pete

58.8k31 gold badges132 silver badges188 bronze badges

1 Comment

Sole Over a year ago

Thanks, that did it.

Imran · Accepted Answer · 2019-09-25 14:04:18Z

1

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

answered Sep 25, 2019 at 14:04

Imran

5301 gold badge4 silver badges18 bronze badges

Comments

Mara Black · Accepted Answer · 2019-09-25 14:06:30Z

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 · Accepted Answer · 2019-09-25 14:13:05Z

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>

Collectives™ on Stack Overflow

Jquery hide div based on input check value

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related