How to create mutually exclusive checkboxes?

[si]

I have a 'task' tiddler that displays checkboxes to indicate the priority of the task:

<$checkbox tag="high-priority"> High Priority</$checkbox>

<$checkbox tag="low-priority"> Low Priority</$checkbox>

I've tried to get it so that if I check one of the boxes the other will be unchecked automatically.

I have tried using the checkactions attribute as follows:

\define uncheck-high-priority() <$action-sendmessage $message="tm-remove-tag" $param="high-priority"/>
\define uncheck-low-priority() <$action-sendmessage $message="tm-remove-tag" $param="low-priority"/>

<$checkbox tag="high-priority" checkactions=<<uncheck-low-priority>>> High Priority</$checkbox>

<$checkbox tag="low-priority" checkactions=<<uncheck-high-priority>>> Low Priority</$checkbox>

Weirdly this works as expected when I try it in the preview pane while editing the tiddler, but when I save the tiddler it ceases to work.

Does anyone know what's going on here?

[Hubert]

Hi,

You need to wrap your tag related widget messages in the fieldmangler widget. Working code below:

\define uncheck-high-priority()
<$fieldmangler>

<$action-sendmessage $message="tm-remove-tag" $param="high-priority"/>

</$fieldmangler>
\end

\define uncheck-low-priority()
<$fieldmangler>

<$action-sendmessage $message="tm-remove-tag" $param="low-priority"/

>
</$fieldmangler>
\end

<$checkbox tag="high-priority" checkactions=<<uncheck-low-priority>>> High Priority</

$checkbox>

<$checkbox tag="low-priority" checkactions=<<uncheck-high-priority>>> Low Priority</$checkbox>

Regards,

Hubert

[Luis Gonzalez]

If you want mutually excluded check boxes the easiest way is doing with fields:

<$checkbox field="priority" checked="low"/> Low task<br/>
<$checkbox field="priority" checked="medium"/> Medium task<br/>
<$checkbox field="priority" checked="high"/> High task<br/>
<$checkbox field="priority" checked="very high"/> Very high task<br/>

 

[si]

Thank you both for your help!

[TonyM]

Of course the standard method for this is the radio button. It uses fields not tags

https://tiddlywiki.com/#RadioWidget

Regards

Tony

[Mark S.]

I wonder if you can use CSS to make it look like checkboxes?

[TonyM]

Mark,

I wonder if you can use CSS to make it look like checkboxes?

 

Do you mean radios, look like checkboxes?

By design no, because a radio has two items, however a toggle button (2 masquerading as one) can look like anything. Including checkboxes and radios.

Regards

Tony