Faster way to use radio buttons functionality without using radio buttons?-CodePudding

I have a web page that loads in 14 images as selectable icons as radio buttons. Right now those buttons work where selecting one deselects another, which is my desired functionality.

Problem is that after clicking the desired image it takes (comparatively) a long time for that image to be "checked". Is there a faster structure for mutually exclusive large amounts of selectable buttons?

Here is my code below for clarification.

The action of clicking on one of these images and them become the exclusively checked image is like 6-700ms which feels ridiculous

<div  align="center">
    <p align="center" style="font-size: 25px;">Now lets choose a team photo.</p>
    <div>
    {% assign upperLimit = photoCount%}
    {% for i in (1..upperLimit)%}
        <!--All the photos in the folder as clickable buttons-->
        <input type="radio"  value="{{i}}" name="item" id="radio{{i}}">
            <label  for="radio{{i}}"> <img src="/images/teams-pictures/{{i}}.jpg" > </label>
    {%- endfor -%}
    </div>
    <div>
    <button  style="padding: 15px 100%" onclick="next()">Next</button>
    </div>

CodePudding user response：

I believe your issue is not the radio buttons, but in JavaScript code that is triggered when you click, or the size of the images.

If I reproduce your case with actual images and 20 options, there is no perceivable delay between clicking an image and the radio button’s status change.

new Vue({
  el: '#app',
  data() {
    return {
      upperLimit: 20
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <fieldset  align="center">
    <legend align="center" style="font-size: 25px;">Now lets choose a team photo.</legend>
    <div>
      <p v-for="i in upperLimit">
        <!--All the photos in the folder as clickable buttons-->
        <input type="radio"  :value="i" name="item" :id="'radio'   i">
        <label  :for="'radio'   i"> <img src="https://loremflickr.com/320/240"  alt="Provide some helpful alt text for the option, please"> </label>
      </p>
    </div>
  </fieldset>
</div>