Jquery: limit user to select only two radio options at once and display values inside divs

Question

I am developing a product comparator where user have to select only two products within a universe with 4 products for example.

In this case, the user would select two products within this universe with 4 products and the information of these selected products would appear inside columns (column 1 and column 2).

I tried to research some similar questions here, but unfortunatly i didn't find a correct way to do that:

My question is: How can i select only two radio options, always limiting only two selections? Also, how can i display radio values from selected options inside column 1 and the second selected product inside column 2?

Below is the code that i'm using:

HTML structure that display 4 products with their respective radio buttons:

<h2 class="mb-3">Produtos</h2>
  
<div class="row justify-content-center">
  
<div class="col-2">

<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/cde9362a09ba4dd38c9ead6600ac074e_9366/Tenis_Duramo_SL_2.0_Preto_GW8336_01_standard.jpg" width="100px"/>

<input class="form-check-input radio" type="radio" name="produto1" id="1" value="Tênis preto">
<label class="form-check-label" for="1"></label>

</div>

<div class="col-2">

<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/7ed0855435194229a525aad6009a0497_9366/Tenis_Superstar_Branco_EG4958_01_standard.jpg" width="100px"/>
    
<input class="form-check-input radio" type="radio" name="produto2" id="2" value="Tênis branco">
<label class="form-check-label" for="2"></label>
  
</div>

<div class="col-2">

<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/9326e8db8d8e4e509e42ad26010cf693_9366/Tenis_adidas_4DFWD_Pulse_Preto_Q46451_01_standard.jpg" width="100px"/>
    
<input class="form-check-input radio" type="radio" name="produto3" id="3" value="Tênis verde">
<label class="form-check-label" for="3"></label>

</div>

<div class="col-2">

<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/7a80a0e74201457eb1e5adcb00ff92f8_9366/Tenis_Dropset_Trainer_Azul_GZ2941_01_standard.jpg" width="100px"/>
    
<input class="form-check-input radio" type="radio" name="produto4" id="4" value="Tênis azul">
<label class="form-check-label" for="4"></label>

</div>

</div>

<div id="coluna1"></div>
<div id="coluna2"></div>

Below is jquery code that takes the values of the selected items and display their information in respective columns. These code not allow to select more than two products:

$('.radio').change(function(){
    
    var shoes = $(this).val();
    var count = $("input[type='radio']:checked").length;
    
    if(count > 2){
        
    alert("you just have to select only two shoes.");
      
        $(this).prop('checked', false);
    
    return false;
      
    }
  
    $('#column1').text(shoes);
    $('#column2').text(shoes);
    
    // 

});

In this case, how could i improve my code to reach the correct result? As a practical example, i I made a draft on JSFidle: https://jsfiddle.net/kg51Lvzx/

score 1 · Accepted Answer · answered Aug 28 '22 at 15:31

To do what you require I would suggest using checkboxes instead of radio controls. This allows the user to deselect an option.

From there you can loop through the selected items to output their text in the relevant divs.

Also, a couple of notes on the HTML. Firstly, I changed the repeated elements to use the same classes instead of incremental ids, as it makes selection much easier. Secondly, the label elements now wrap the relevant content. This means that the checkbox control and the image are clickable to make the selection.

let $output = $('.output');

let updateSelections = () => {
  $output.text('');
  $products.filter(':checked').each((i, el) => {
    $output.eq(i).text(el.value);
  });
}

let $products = $('.product').change(function() {
  if ($products.filter(':checked').length > 2) {
    $(this).prop('checked', false);
    alert("you just have to select only two shoes.");
  } else {
    updateSelections();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" />
<h2 class="mb-3">Products - shoes</h2>
<div class="row justify-content-center">
  <div class="col-2 ms-2">
    <label class="form-check-label">
      <img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/cde9362a09ba4dd38c9ead6600ac074e_9366/Tenis_Duramo_SL_2.0_Preto_GW8336_01_standard.jpg" width="100px" />
      <div>
        <input class="form-check-input product" type="checkbox" name="product1" id="1" value="Black shoes">
      </div>
    </label>
  </div>
  <div class="col-2 ms-2">
    <label class="form-check-label">
      <img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/7ed0855435194229a525aad6009a0497_9366/Tenis_Superstar_Branco_EG4958_01_standard.jpg" width="100px" />
      <div>
        <input class="form-check-input product" type="checkbox" name="product2" id="2" value="White shoes">
      </div>
    </label>
  </div>
  <div class="col-2 ms-2">
    <label class="form-check-label">
      <img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/9326e8db8d8e4e509e42ad26010cf693_9366/Tenis_adidas_4DFWD_Pulse_Preto_Q46451_01_standard.jpg" width="100px" />
      <div>
        <input class="form-check-input product" type="checkbox" name="product3" id="3" value="Green shoes">
      </div>
    </label>
  </div>
  <div class="col-2 ms-2">
    <label class="form-check-label">
      <img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/7a80a0e74201457eb1e5adcb00ff92f8_9366/Tenis_Dropset_Trainer_Azul_GZ2941_01_standard.jpg" width="100px" />
      <div>
        <input class="form-check-input product" type="checkbox" name="product4" id="4" value="Blue shoes">
      </div>
   </label>
  </div>
</div>
<div class="output" id="column1"></div>
<div class="output" id="column2"></div>

Jquery: limit user to select only two radio options at once and display values inside divs

1 Answers1