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:

1. Get two values from select option at once
2. Select and Radio options to show div
3. Two radio buttons are selecting at once

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 >Produtos</h2>
  
<div >
  
<div >

<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  type="radio" name="produto1" id="1" value="Tênis preto">
<label  for="1"></label>

</div>

<div >

<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  type="radio" name="produto2" id="2" value="Tênis branco">
<label  for="2"></label>
  
</div>

<div >

<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  type="radio" name="produto3" id="3" value="Tênis verde">
<label  for="3"></label>

</div>

<div >

<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  type="radio" name="produto4" id="4" value="Tênis azul">
<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/

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" />
<h2 >Products - shoes</h2>
<div >
  <div >
    <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  type="checkbox" name="product1" id="1" value="Black shoes">
      </div>
    </label>
  </div>
  <div >
    <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  type="checkbox" name="product2" id="2" value="White shoes">
      </div>
    </label>
  </div>
  <div >
    <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  type="checkbox" name="product3" id="3" value="Green shoes">
      </div>
    </label>
  </div>
  <div >
    <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  type="checkbox" name="product4" id="4" value="Blue shoes">
      </div>
   </label>
  </div>
</div>
<div  id="column1"></div>
<div  id="column2"></div>