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