CODEWITHSUNDEEP
javascripthtml
hyPerdarKness
hyPerdarKness

Reputation: 3

button click after input radio checked

Clicking this button but, I cannot input radio checked.

<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);
}

how can I do it?

jsfiddle demo

Upvotes: 0

Views: 53

Answers (4)

Gurami Nikolaishvili
Gurami Nikolaishvili

Reputation: 182

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>

Upvotes: 0

Ayushya
Ayushya

Reputation: 1920

You should use prop instead.

$(".button").click(function (e){
$('input', e.target).prop('checked', true);
}

Upvotes: 0

Taplar
Taplar

Reputation: 24965

Instead of finding by the global selector, you need to use the button you clicked as the context by which you search in. This way you only check the nested input and do not try to check all of them, thus checking most likely only the last one.

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

Upvotes: 1

Ishant Solanki
Ishant Solanki

Reputation: 207

$(".button").click(function (){
   $(this).find('input.radio').attr('checked', true)
})

Try updating it like this?

Please see jsFiddle: https://jsfiddle.net/gto9ck47/1/

Upvotes: 0

Related Questions