1
votes

Jquery hide div basé sur la valeur de contrôle d'entrée

J'essaye de masquer un div basé sur une valeur de contrôle d'entrée. Cela devrait également fonctionner si l'élément est déjà vérifié, jusqu'à présent, mon code ne fonctionne pas. Comme le div que je veux cacher le montre toujours? J'ai créé un JS Fiddle pour reproduire le problème

Le code est le suivant:

<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>

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

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

N'importe quelle entrée serait géniale.

javascript jquery html

2 commentaires

if (test == true) sera toujours vrai. Vous souhaitez vérifier l'état coché

Copie possible de Comment utiliser la radio lors d'un événement de changement?

5 Réponses :

1
votes

vérifier s'il existe des entrées avec la valeur d'origine qui sont cochées :

<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>

// 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
  }
})

1 commentaires

Merci, ça l'a fait.

1
votes

Essayez ceci. Commencez par vérifier la fonction prête si l'entrée est cochée. Et puis vérifiez la fonction de changement d'entrée.

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

0 commentaires

1
votes

Duplicata de Si le bouton radio est coché, afficher div

Voici le code adapté à votre cas:

<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>

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

0 commentaires

1
votes

Vous devez ajouter un écouteur d'événements pour le groupe radio, puis obtenir la valeur de l'option cochée. De plus, vous souhaiterez probablement l'exécuter une fois lors du chargement de la page, ce que fait le .change () sur la dernière ligne.

<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>

//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

0 commentaires

2
votes

Vous pouvez le faire avec CSS uniquement:

<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>

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

0 commentaires