Automatically uncheck a checkbox when another checkbox is checked

Question

I work with XUL and I have two hboxes in each there is one checkbox :

<hbox id="hBox1">
   <label value="label1" style="width:15ex" />
   <spacer style="width:5px" />
   <checkbox id="checkBox1" style="width: 2ex" />
</hbox>

<hbox id="hBox2">
   <label value="label2" style="width:15ex" />
   <spacer style="width:5px" />
   <checkbox id="checkBox2" style="width: 2ex" />
</hbox>

I want to have this behaviour : only one of the two chekboxes can be checked ie if the user checks one checkbox whereas the other is checked, then the second checkbox must be automatically unchecked

I tried this :

<checkbox id="checkBox1" style="width: 2ex" onchange="if (this.checked) document.getElementById('checkBox2').checked = false" />

<checkbox id="checkBox2" style="width: 2ex" onchange="if (this.checked) document.getElementById('checkBox1').checked = false" />

but it does not work

Answer 1

You are using onchange when you should be using concommand .

The following works:

<hbox id="hBox1">
   <label value="label1" style="width:15ex" />
   <spacer style="width:5px" />
   <checkbox id="checkBox1" style="width: 2ex" oncommand="if (this.checked) document.getElementById('checkBox2').checked = false" />
</hbox>

<hbox id="hBox2">
   <label value="label2" style="width:15ex" />
   <spacer style="width:5px" />
   <checkbox id="checkBox2" style="width: 2ex" oncommand="if (this.checked) document.getElementById('checkBox1').checked = false" />
</hbox>

However, this will result in the checkbox label not actually being associated with the checkbox (clicking the label will not check/uncheck the checkbox) and a small graphical artifact where the <checkbox> label would normally be displayed. Normally, having the label on the left would be implemented using the dir property:

<hbox id="hBox1">
  <vbox id="vBox1">
   <checkbox id="checkBox1" dir="reverse" label="label1" style="width: 21ex" oncommand="if (this.checked) document.getElementById('checkBox2').checked = false" />
   <checkbox id="checkBox2" dir="reverse" label="label2" style="width: 21ex" oncommand="if (this.checked) document.getElementById('checkBox1').checked = false" />
  </vbox>
</hbox>

<radio> buttons are specifically for permitting a single selection

This is usually implemented with a <radio> inside a <radiogroup> . <radio> boxes automatically have this behavior when placed inside a <radiogroup> . They are usually styled a bit different (round, instead of square), but that can be changed with CSS, if you desire. However, the round styling is intended to provide the information to the user that it is a radio button and has this behavior.

<hbox>
  <vbox>
    <radiogroup>
      <radio id="checkBox1" dir="reverse" label="label1" style="width: 21ex" />
      <radio id="checkBox2" dir="reverse" label="label2" style="width: 21ex" />
    </radiogroup>
  </vbox>
</hbox>