CODEWITHSUNDEEP
javascriptjqueryhtml
Sole
Sole

Reputation: 3340

Jquery hide div based on input check value

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.

Upvotes: 1

Views: 1797

Answers (5)

Guillermo Guti&#233;rrez
Guillermo Guti&#233;rrez

Reputation: 17819

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>

Upvotes: 3

WOUNDEDStevenJones
WOUNDEDStevenJones

Reputation: 5315

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>

Upvotes: 1

Mara Black
Mara Black

Reputation: 1751

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>

Upvotes: 1

Imran
Imran

Reputation: 530

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

Upvotes: 1

Pete
Pete

Reputation: 58442

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>

Upvotes: 2

Related Questions