Comment changer dynamiquement l'état de la radio via js (tutoriel détaillé)-js tutoriel-php.cn

Comment changer dynamiquement l'état de la radio via js (tutoriel détaillé)

亚连

Libérer： 2018-06-04 10:48:55

original

2790 Les gens l'ont consulté

Ci-dessous, je vais partager avec vous une méthode js pour changer dynamiquement le statut de la radio. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

La radio H5 est livrée avec un changement d'état sélectionné intégré, mais si l'état intégré ne peut pas répondre à vos besoins, vous devez le mettre en œuvre vous-même.

Le code est le suivant :

Code partiel h5

<p class="group">
 <label class="active">
  <input type="radio" name="parent_radio" value="1" id="new_data" onclick="change()"/>
  最新资料</label>
 <label>
  <input type="radio" name="parent_radio" value="0" id="my_data" onclick="change()"/>
  我的资料</label>
 <label>
  <input name="parent_radio" type="radio" id="screen_data" value="0" onclick="change()"/>
  分类浏览</label>
 <label>
  <input type="radio" name="parent_radio" value="0" id="history_data" onclick="change()"/>
  浏览历史</label>
</p>

Copier après la connexion

Code CSS

<style>
 input[type="radio"] {
  /*取消自带按钮*/
  color:gray;
  display: none;
 }
 .group>label:hover{
  /*鼠标移到控件上做的改变*/
  background-color: cornflowerblue;
 }
 .group>label{
  /*未选中状态*/
  float: left;
  color: #4A4A4A;
  font-size: 16px;
  padding: 10px 11px;
 }
 .group>label.active{
  /*选中状态*/
  color: #316CEB;
  font-size: 16px;
  border-top: 2px solid #316CEB;
  padding: 10px 11px;
 }
</style>

Copier après la connexion

Code de la méthode JS

<script type = "text/javascript">
 function change()
 {
  var radio = document.getElementsByName("parent_radio");
  /*用ByName是为了取到所有的radio*/
  var radioLength = radio.length;
  for(var i = 0;i < radioLength;i++)
  {
   if(radio[i].checked)
   {
    radio[i].parentNode.setAttribute(&#39;class&#39;, &#39;active&#39;);
   }else {
    radio[i].parentNode.setAttribute(&#39;class&#39;, &#39;&#39;);
   }
  }
 }
</script>

Copier après la connexion

L'effet est le suivant

Ce qui est implémenté ici, c'est l'affichage et le masquage dynamiques du cadre supérieur et le bouton rond par défaut sur le côté gauche de la radio est réglé sur masqué. Si vous souhaitez que le bouton ne soit pas masqué, vous devez apporter les modifications suivantes

<p class="group">
 <label class="active"><img src="images/delate_choose.png" name="image">
  <input type="radio" name="parent_radio" value="1" id="new_data" onclick="change()"/>
  最新资料</label>
 <label>
  <img src="images/delate_no_choose.png" name="image">
  <input type="radio" name="parent_radio" value="0" id="my_data" onclick="change()"/>
  我的资料</label>
 <label>
  <img src="images/delate_no_choose.png" name="image">
  <input name="parent_radio" type="radio" id="screen_data" value="0" onclick="change()"/>
  分类浏览</label>
 <label>
  <img src="images/delate_no_choose.png" name="image">
  <input type="radio" name="parent_radio" value="0" id="history_data" onclick="change()"/>
  浏览历史</label>
</p>

Copier après la connexion

C'est-à-dire ajouter une image devant chaque entrée de type raid (notez la différence entre sélectionné et non sélectionné), et apportez les modifications suivantes à la méthode de changement JS

var radio = document.getElementsByName("parent_radio");
var img = document.getElementsByName("image");
/*用ByName是为了取到所有的radio*/
var radioLength = radio.length;
for(var i = 0;i < radioLength;i++)
{
 if(radio[i].checked)
 {
  img[i].src = "images/delate_choose.png";
  radio[i].parentNode.setAttribute(&#39;class&#39;, &#39;active&#39;);
 }else {
  img[i].src = "images/delate_no_choose.png";
  radio[i].parentNode.setAttribute(&#39;class&#39;, &#39;&#39;);
 }
}

Copier après la connexion

La longueur de l'img doit être la même que la longueur de la radio, vous ne pouvez donc prendre qu'une seule longueur.

L'effet est le suivant :