lundi 5 novembre 2018

How to have multiple checkboxes for as radio buttons [duplicate]

This question already has an answer here:

I am stuck with a problem that I don't know a easy solution for. Here is the thing I would like to create a sort of a checklist where you have 3 different options (correct(check), halfcorrect(circle), incorrect(x)) and that would be used for more different entries at once. And I would like to be able to use them as radio buttons, so using only one of them for that line. I can not set the type to "radio" or my css for the animations for some reason doesn't work. Here is a picture of how does it look with the css checkboxes as radio

I've written some js code that works, but it is useless if there is a big amount of entries, because I take every input by id here is the code for JS:

function chbx(obj)
{
var that = obj;
   if(document.getElementById(that.id).checked == true) {
      document.getElementById('checkbox1').checked = false;
      document.getElementById('checkbox2').checked = false;
      document.getElementById('checkbox3').checked = false;
      document.getElementById(that.id).checked = true;
   }
}

and here is the html code:

<ul>
    <li>
      <p>ENTRY 1</p>
        <input class="testcheck" type="radio" name="checkbox1" id="checkbox1"  onclick="chbx(this)" />
        <label class="greencheck" for="checkbox1"></label>
        <input class="testkrog" type="radio" name="checkbox2" id="checkbox2"  onclick="chbx(this)" />
        <label class="yellowcircle" for="checkbox2"></label>
        <input class="testx" type="radio" name="checkbox3" id="checkbox3"  onclick="chbx(this)" />
        <label class="redx" for="checkbox3"></label>  
    </li>
    <li>
      <p>ENTRY 2</p>
        <input class="testcheck" type="radio" name="checkbox4" id="checkbox4" />
        <label class="greencheck" for="checkbox4"></label>
        <input class="testkrog" type="radio" name="checkbox5" id="checkbox5" />
        <label class="yellowcircle" for="checkbox5"></label>
        <input class="testx" type="radio" name="checkbox6" id="checkbox6"" />
        <label class="redx" for="checkbox6"></label>  
    </li>
    <li>
      <P>ENTRY 3</P>
        <input class="testcheck" type="radio" name="checkbox7" id="checkbox7"" />
        <label class="greencheck" for="checkbox7"></label>
        <input class="testkrog" type="radio" name="checkbox8" id="checkbox8"" />
        <label class="yellowcircle" for="checkbox8"></label>
        <input class="testx" type="radio" name="checkbox9" id="checkbox9"" />
        <label class="redx" for="checkbox9"></label>   
    </li>
</ul>

There might be a simple solution in my function, but I don't know it. I would really appreciate any kind of help. Cheers :)




Aucun commentaire:

Enregistrer un commentaire