0
votes

JQuery show masquer div si la radio sélectionnée

Je travaille sur un projet, Est-ce que j'essaie d'être possible? Le code que j'essaie d'écrire est ci-dessous et c'est ce que j'essaie de faire:

Je vais générer beaucoup plus d'effondrement de My-DB et d'ID de ligne et de HREF sera généré automatiquement. P>

Je veux écrire un script JQuery pour afficher Masquer les DIV connexes via des boutons radio dans chaque ligne. P>

Merci d'avance. P>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div clas="col">
      <div class="title">
        <a href="#row01" data-toggle="collapse">Title - 1</a>
      </div>
      <div class="title">
        <a href="#row02" data-toggle="collapse">Title -2</a>
      </div>
    </div>
  </div>
  <div class="row collapse" data-row-id="0" id="row01">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-1" data-radio-type="personal" checked>
      <label>Business</label>
      <input type="radio" name="radio-1" data-radio-type="business">
      <div class="radio-hide" id="personal-div">
        personal information
      </div>
      <div class="radio-hide" id="business-div">
        business information
      </div>
    </div>
  </div>
  <div class="dropdown-divider"></div>
  <div class="row collapse" data-row-id="0" id="row02">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-2" data-radio-type="personal">
      <label>Business</label>
      <input type="radio" name="radio-2" data-radio-type="business" checked>
      <div class="radio-hide" id="personal-div">
        personal information
      </div>
      <div class="radio-hide" id="business-div">
        business information
      </div>
    </div>
  </div>
</div>

javascript jquery html show-hide radio-button

0 commentaires

3 Réponses :

0
votes

Vous pouvez contrôler les boutons radio pour afficher ou masquer des divs spécifiques dans CSS, comme celui-ci:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div clas="col">
      <div class="title">
        <a href="#row01" data-toggle="collapse">Title - 1</a>
      </div>
      <div class="title">
        <a href="#row02" data-toggle="collapse">Title -2</a>
      </div>
    </div>
  </div>
  <div class="row collapse" data-row-id="0" id="row01">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-1" data-radio-type="personal" id="id1" checked>
      <label>Business</label>
      <input type="radio" name="radio-1" data-radio-type="business" id="id2">
      <div class="radio-hide" id="personal-div">
        personal information
      </div>
      <div class="radio-hide" id="business-div">
        business information
      </div>
    </div>
  </div>
  <div class="dropdown-divider"></div>
  <div class="row collapse" data-row-id="0" id="row02">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-2" data-radio-type="personal" id="id3">
      <label>Business</label>
      <input type="radio" name="radio-2" data-radio-type="business" id="id4" checked>
      <div class="radio-hide" id="personal-div">
        personal information
      </div>
      <div class="radio-hide" id="business-div">
        business information
      </div>
    </div>
  </div>
</div>

0 commentaires

0
votes

J'ai ajouté un conditionnel pour chaque groupe radio et cela fonctionne bien qu'il ne soit pas aussi dynamique que vous recherchez.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div clas="col">
      <div class="title">
        <a href="#row01" data-toggle="collapse">Title - 1</a>
      </div>
      <div class="title">
        <a href="#row02" data-toggle="collapse">Title - 2</a>
      </div>
    </div>
  </div>
  <div class="row collapse" data-row-id="0" id="row01">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-1" value="personal">
      <label>Business</label>
      <input type="radio" name="radio-1" value="business">
      <div class="radio-hide" id="personal-div">
        personal information
      </div>
      <div class="radio-hide" id="business-div">
        business information
      </div>
    </div>
  </div>
  <div class="dropdown-divider"></div>
  <div class="row collapse" data-row-id="0" id="row02">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radio-2" value="personal">
      <label>Business</label>
      <input type="radio" name="radio-2" value="business">
      <div class="radio-hide" id="personal-div2">
        personal information
      </div>
      <div class="radio-hide" id="business-div2">
        business information
      </div>
    </div>
  </div>
</div>

0 commentaires

0
votes

J'ai monté, cela fonctionne, mais aucune aide toujours appréciée si elle est incorrecte.

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div clas="col">
      <div class="title">
        <a href="#row01" data-toggle="collapse">Title - 1</a>
      </div>
      <div class="title">
        <a href="#row02" data-toggle="collapse">Title -2</a>
      </div>
    </div>
  </div>
  <div class="row collapse" data-row-id="0" id="row01">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radiotype" data-radio-type="personal" checked="checked">
      <label>Business</label>
      <input type="radio" name="radiotype" data-radio-type="business">
      <div class="radio-hide personal">
        personal information
      </div>
      <div class="radio-hide business">
        business information
      </div>
    </div>
  </div>
  <div class="dropdown-divider"></div>
  <div class="row collapse" data-row-id="0" id="row02">
    <div class="col">
      <label>Personal</label>
      <input type="radio" name="radiotype-2" data-radio-type="personal">
      <label>Business</label>
      <input type="radio" name="radiotype-2" data-radio-type="business" checked="checked">
      <div class="radio-hide personal">
        personal information
      </div>
      <div class="radio-hide business">
        business information
      </div>
    </div>
  </div>
</div>

0 commentaires