En cliquant sur ce bouton, je ne peux pas entrer la radio cochée.

<button class="button" style="width:100px;">
  <input class="radio" type="radio" name="choose" value="1"> value 1
</button><br><br>
<button class="button" style="width:100px;">
  <input class="radio" type="radio" name="choose" value="2"> value 2
</button><br><br>
<button class="button" style="width:100px;">
  <input class="radio" type="radio" name="choose" value="3"> value 3
</button><br><br>
<button class="button" style="width:100px;">
  <input class="radio" type="radio" name="choose" value="4"> value 4
</button>

Js:

$(".button").click(function (){
$('input[name=choose]').attr('checked', true);
}

Comment puis-je le faire?

démo jsfiddle

0
hyPerdarKness 3 juin 2020 à 23:29

4 réponses

Meilleure réponse

Au lieu de rechercher par le sélecteur global, vous devez utiliser le bouton sur lequel vous avez cliqué comme contexte dans lequel vous effectuez votre recherche. De cette façon, vous ne vérifiez que les entrées imbriquées et n'essayez pas de toutes les vérifier, ce qui ne vérifie probablement que la dernière une.

$('.button').on('click', e => {
  $('input', e.target).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" style="width:100px;">
  <input class="radio" type="radio" name="choose" value="1"> value 1
</button><br><br>
<button class="button" style="width:100px;">
  <input class="radio" type="radio" name="choose" value="2"> value 2
</button><br><br>
<button class="button" style="width:100px;">
  <input class="radio" type="radio" name="choose" value="3"> value 3
</button><br><br>
<button class="button" style="width:100px;">
  <input class="radio" type="radio" name="choose" value="4"> value 4
</button>
1
Taplar 3 juin 2020 à 20:35
Try Pure javascript without embeding 80kb code to your website

<button class="button" style="width:100px;">
  <input class="radio" type="radio" name="choose" value="1"> value 1
</button><br><br>
<button class="button" style="width:100px;">
  <input class="radio" type="radio" name="choose" value="2"> value 2
</button><br><br>
<button class="button" style="width:100px;">
  <input class="radio" type="radio" name="choose" value="3"> value 3
</button><br><br>
<button class="button" style="width:100px;">
  <input class="radio" type="radio" name="choose" value="4"> value 4
</button>


<script>

    let buttons = document.querySelectorAll('.button');

    buttons.forEach(button =>{
        button.addEventListener('click', ()=> {
            button.children[0].checked = true;
        });
    })

</script>
0
Gurami Nikolaishvili 3 juin 2020 à 20:58
$(".button").click(function (){
   $(this).find('input.radio').attr('checked', true)
})

Essayez de le mettre à jour comme ça?

Veuillez consulter jsFiddle: https://jsfiddle.net/gto9ck47/1/

0
Ishant Solanki 3 juin 2020 à 20:35

Vous devriez utiliser prop à la place.

$(".button").click(function (e){
$('input', e.target).prop('checked', true);
}
0
Ayushya 3 juin 2020 à 20:39