3
According to the Snippet
below, when clicking on a checkbox
, the others should be unchecked, but it only happens if you click them from right to left, if I click them from left to right, nothing happens.
Does anyone have any idea what’s going on?
Explanation:
When selecting a checkbox
, I’ll apply an X filter to a Y field.
There are already others Radio Button
in use, and my superior wants the checkbox
.
var d = document.getElementById('dinheiro');
var p = document.getElementById('porcentagem');
var h = document.getElementById('hora');
function marcaDesmarca() {
if (d.checked) {
document.getElementById('porcentagem').checked = false;
document.getElementById('hora').checked = false;
} else if (p.checked) {
document.getElementById('dinheiro').checked = false;
document.getElementById('hora').checked = false;
} else if (h.checked) {
document.getElementById('dinheiro').checked = false;
document.getElementById('porcentagem').checked = false;
}
}
<div style='position: relative;'>
<input id="dinheiro" name="tipoentrada" type="checkbox" value="D" onclick="marcaDesmarca()"> <label style='display: contents;'>Dinheiro</label>
<input id="porcentagem" name="tipoentrada" type="checkbox" value="P" onclick="marcaDesmarca()"> <label style='display: contents;'>Porcentagem</label>
<input id='hora' name="tipoentrada" type="checkbox" value="H" onclick="marcaDesmarca()"> <label style='display: contents;'>Hora/Minuto</label>
</div>
If you want to mark only one option,
radio button
would not be more appropriate?– Mathiasfc
Yes, but I need to use the
checkbox
!– Marcos Henzel
For what exact reason?
– Woss
My superior’s preference and there are already others
radio button
in use.– Marcos Henzel
If it’s just a visual matter, use
radio
and defineappearance
ascheckbox
(see a example). This way it’ll look like they’recheckbox
, but areradio
and function asradio
. What your superior requested makes no sense and you should guide him not to do.– Woss
Thank you Anderson!
– Marcos Henzel
"What your superior asked for doesn’t make sense and you should guide him not to." , I even joked in the answer but completely according to this placement of @Andersoncarloswoss.
– Mathiasfc
I appreciate the answers and the explanations, they will be very useful for me and others too, but as @Mathias answered first and correctly, I will mark his answer as correct!
– Marcos Henzel
The answer is correct, but the approach is not good. Of the three best ideas is @Andersoncarloswoss, for sure.
– Jéf Bueno
It is the least worse, I would say, because even changing the appearance of one element to another is not recommended because it will generate strangeness in the user or see a
checkbox
and not being able to dial more than one option. Although this strangeness can be circumvented if the auxiliary text of the field makes it very explicit that it will be allowed to select only one item.– Woss
@Andersoncarloswoss you should post as a response to your idea of getting radios look like checkbox. It is the least vulnerable way to bugs, perhaps the only one that will not give headaches in the future.
– Oralista de Sistemas