如何用单选按钮隐藏div

Question

我希望我能在选择单选按钮之后显示或隐藏一个div。

我有4个单选按钮

包括必须显示相同div的3。

和另一个div

我找到的最好的方法就是这个

但是，是否有办法避免具有相同内容的3div呢？

我想更好地解释一下，当我们选择"4辆车，3辆车，2辆车“时，id = "liv -1”只是可见的，但如果选择了id = "liv - 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>

​

Answer 1

不要使用ids，而是使用数据属性来使用所需的值。就像我假设您想在语言上这样做，所以我使用了data-lang=""。按你的喜好调整。

ps。如果在加载页面时选择了一个值，您也可能希望做一个默认的打开值。

​

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

​

Answer 2

这条路：

https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle

1. 使用表单
2. 使用标签
3. 使用css
4. 使用mdn doc ->

​

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>

​

Answer 3

你只有两个选择。显示a) j‘’ai sélectionné3或b) j‘’ai sélectionné2，然后在事件处理程序中使用一个简单的if条件。就像这样：

工作方式示例

​

const sel = document.querySelector('#sel');
sel.addEventListener('click', (e) => {
  const i = document.querySelector('input[name="choix_livraison"]:checked');  
  let val = e.target.value;
  console.log('=>',val)
  if (val == 1) {    
    // show output 1
    document.getElementById('output-2').classList.add('hide')
    document.getElementById('output-1').classList.remove('hide')
  } else {
    console.log(2)
    // show output 2
    document.getElementById('output-1').classList.add('hide');
    document.getElementById('output-2').classList.remove('hide');    
  }
});

.hide {
  display:none;
}

<div id="sel">
  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>

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

​