Change radio check when clicking on an associated item

Question

Change radio check when clicking on an associated item

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I need that when I click on the a tag the radio will check. I did a function to do it and it does it well, the problem is that if I want to check another one that I had already checked, it does not do it anymore. I need the tags in that order and I can not do it.

Welcome to all suggestions

$(function(){

  $(document).on('click','a',function(e){
    
    e.stopPropagation();
    e.preventDefault();
    
    $(this).find('input[type="radio"]').attr('checked','checked');
    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href="#"><input type="radio" name="radio" value="0" checked>Opcion 1</a>
  <a href="#"><input type="radio" name="radio" value="1" >Opcion 2</a>
  <a href="#"><input type="radio" name="radio" value="2" >Opcion 3</a>
</div>

javascript jquery

asked by Alberto Siurob 01.11.2017 в 16:54

source

2 answers

1

What happens is that every time you add the attribute checked to the child radius that you select this remains there even when you select another element, for example when you click on each one the html is like this:

<div>
    <a href="#"><input type="radio" name="radio" value="0" checked="checked">Opcion 1</a>
    <a href="#"><input type="radio" name="radio" value="1" checked="checked">Opcion 2</a>
    <a href="#"><input type="radio" name="radio" value="2" checked="checked">Opcion 3</a>
</div>

so when clicking again it does not work anymore. I would mention the method removeAttr as a solution but the use of attr and similar is deprecated and the best thing in these cases is to use the method prop('checked', 'cheked') to add the attribute.

Another simpler way to achieve what you want is to use the label tag and link it to your checkbox using the for="id" attribute

<a href="#"><input type="radio" id="radio-1" name="radio" value="0" checked="checked"><label for="radio-1">Opcion 1</label></a>
<a href="#"><input type="radio" id="radio-2" name="radio" value="1"><label for="radio-2">Opcion 2</label></a>
<a href="#"><input type="radio" id="radio-3" name="radio" value="2"><label for="radio-3">Opcion 3</label></a>

This way you do not need to use jquery and link events.

answered by 01.11.2017 в 17:46

Android Multi-thread Attempt in TextWatcher Problems with Sums JS

score 1 · Accepted Answer

Instead of using .attr() to assign the checked you should use .prop ()

The .prop() method provides a way to explicitly retrieve values from a property, while .attr() retrieves attributes.

$(function(){

  $(document).on('click','a',function(e){
    
    e.stopPropagation();
    e.preventDefault();
    
    $(this).find('input[type="radio"]').prop('checked','checked');
    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href="#"><input type="radio" name="radio" value="0" checked>Opcion 1</a>
  <a href="#"><input type="radio" name="radio" value="1" >Opcion 2</a>
  <a href="#"><input type="radio" name="radio" value="2" >Opcion 3</a>
</div>