如何使用單選按鈕隱藏div

我希望我可以在選擇單選按鈕后顯示或隱藏一個 div
我有 4 個單選按鈕，
包括 3 個必須顯示相同的 div
和 1 個另一個 div
我發現的最好方法是這個
但是有沒有辦法避免擁有 3具有相同內容的div？
我想更好地解釋一下，當我們選擇“4 Cars，3 Cars，2 Cars”時，id =“liv-1”是簡單可見的，但是如果選擇“because 1”，則 id =“liv - 1"或隱藏

$(document).ready(function() {
  $("div.desc").hide();
  $("input[name$='choix_livraison']").click(function() {
    var test = $(this).val();
    $("div.desc").hide();
    $("#ref-"   test).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2 Cars
<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="POSTE-ENVELLOPPE-belgique" value="1" checked="checked"> 
3 Cars
<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-belgiqueE" value="2">
3 Cars
<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-FRANCE" value="3">
3 Cars
<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-autre" value="4">

<div id="ref-1" class="desc">
  j'ai sélectionné 2
</div>
<div id="ref-2" class="desc">
  j'ai sélectionné 3
</div>
<div id="ref-3" class="desc">
  j'ai sélectionné 3
</div>
<div id="ref-4" class="desc">
  j'ai sélectionné 3
</div>

uj5u.com熱心網友回復：

這邊走：

1. 使用表格
2. 使用標簽
3. 使用 CSS
4. 使用 mdn doc -> https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle

const
  myForm = document.querySelector('#my-form')
, divLiv = document.querySelectorAll('div.desc')
, ref_Divs = 
    { '1' : 'ref-2'
    , '2' : 'ref-3' 
    , '3' : 'ref-3' 
    , '4' : 'ref-3' 
    };
myForm.onsubmit = e => e.preventDefault() // disable form page reload
  ;
myForm.oninput = e =>
  {
  let ref = ref_Divs[myForm.choix_livraison.value ]
  divLiv.forEach(el =>
    {
    el.classList.toggle('selected', ref===el.id)
    })
  }

.desc          { display: none; }
.desc.selected { display: block; }
label          { display: block; }

  <form id="my-form">
    <label>
      2 Cars
      <input type="radio" name="choix_livraison" value="1" class="choix_livraison" data-nom="POSTE-ENVELLOPPE-belgique"  checked="checked"> 
      POSTE-ENVELLOPPE-belgique
    </label>
    <label>
      3 Cars
      <input type="radio" name="choix_livraison" value="2" class="choix_livraison" data-nom="mondial relay-belgiqueE" >
      mondial relay-belgiqueE 
    </label>
    <label>
      3 Cars
      <input type="radio" name="choix_livraison" value="3" class="choix_livraison" data-nom="mondial relay-FRANCE" > 
      mondial relay-FRANCE
    </label>
    <label>
      3 Cars
      <input type="radio" name="choix_livraison" value="4" class="choix_livraison" data-nom="mondial relay-autre" > 
      mondial relay-autre
    </label>
  </form>
  <br>
  <div id="ref-2" class="desc selected"> j'ai sélectionné 2 </div>
  <div id="ref-3" class="desc"> j'ai sélectionné 3 </div>

uj5u.com熱心網友回復：

而不是 ids 使用 data 屬性來使用您想要的值。就像我假設你想用語言做的一樣，所以我使用了data-lang="". 根據您的喜好調整它。

附言。您可能還希望在加載頁面時選擇默認打開一個值。

$(document).ready(function() {
  $("div.desc").hide();
  $("input[name$='choix_livraison']").click(function() {
    var languageCode = $(this).data('lang');
    $("div.desc").hide();
    $("#ref-"   languageCode).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2 Cars
<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="POSTE-ENVELLOPPE-belgique" data-lang="be" value="1" checked="checked"> 
3 Cars
<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-belgiqueE" data-lang="be" value="2">
3 Cars
<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-FRANCE" data-lang="fr" value="3">
3 Cars
<input type="radio" name="choix_livraison" class="choix_livraison" data-nom="mondial relay-autre" data-lang="be" value="4">


<div id="ref-be" class="desc">
  languageCode BE
</div>
<div id="ref-fr" class="desc">
  languageCode FR
</div>

標籤：

上一篇：`react-query`改變onSuccess函式沒有回應

下一篇：expressjs-mongoDb回傳嵌套子陣列