Create a Checkbox

Question

Write a program that creates a two-state checkbox that people can interact with using a mouse.

Specifically, your program should achieve all of the following:

1. Have a 8×8 pixel (or larger if desired) region of the screen that is the clickable area of the checkbox. Henceforth this region is simply called the checkbox.

2. When the mouse cursor is moved within the checkbox and the default* mouse button is pressed, the checkbox should toggle states.
   Checked becomes unchecked. Unchecked becomes checked.

3. The checkbox should not move when it is toggled.

4. In the checked state, the checkbox may be any colors.

5. In the unchecked state, the checkbox may be any colors as long as at least 16 pixels are visually distinct from the checked state.

6. In a single program instance, all checked states should be visually identical to one another and all unchecked states should be visually identical to one another.

7. Don't end the program until it's explicitly terminated (e.g. via exit button or Alt+F4), so a user can click the checkbox as much as they want.

^{*You may assume the default mouse button is always left click, but it's also fine to use the default as defined by mouse software or the OS, which may not actually be left click depending on the user.}

Notes

• It does not matter what is outside of your checkbox region. It could just be the desktop. It could be a portion of a console that changes on every toggle.

• It does not matter what state your checkbox starts in.

• The checkbox region may have any dimensions at or above 8×8 pixels. It need not be square.

• You may make minor allowances for settings that are out of your control such as console font size, browser zoom, monitor resolution, etc. As long your program works in a reasonable test setting it should be valid.

• If your program opens a window, you may assume it has been dragged to an appropriate location on the screen if necessary (e.g. top left corner).

• You may use markup languages such as HTML or other languages we usually don't consider as full-fledged programming languages.

• Your checkbox must be be toggleable using the default mouse button. It's alright if it also toggles for other forms of input (e.g. right mouse button), with the exception of mouse motion. i.e. the state should not change if the mouse is merely moved within the checkbox.

• Screenshots of your checkbox in action are highly encouraged!

Scoring

The shortest code in bytes wins.

Example

A canonical HTML example in 23 bytes.

<input type="checkbox">

For me in Google Chrome, this makes a 12×12 pixel checkbox and about 30 pixels clearly change between checked and unchecked states.

I make the allowance that browser zoom is at 100%.

Answer 1

Jolf, 19 bytes

"<Ξ♠ΐ♠type=Ξ\t5δbox>

Replace \t with a tab literal and ♠ with 0x06. Try it here!

"<Ξ♠ΐ♠type=Ξ\t5δbox>
"...................   string containing...
 <                     "<"
  Ξ♠ΐ♠                 compressed for "input "
      type=            "type="
           Ξ\t5δ       compressed for "CHECK"
                box    "box"
                   >

This displays a checkbox to the output element.

Answer 2

Slim, 21 Bytes

input type="checkbox"

Try it here

So yeah. One of slim's major features is that < and > characters are not there. So basically, I get 2 bytes less than the creator of the question!

Answer 3

Bash + zenity, 31

zenity --checklist --column a a

Answer 4

Bash (+yad), 23 bytes

Golfed

yad --form --field :chk

YAD is a program that will display GTK+ dialogs, and return (either in the return code or on standard output) the users input. This allows you to present information, and ask for information from the user, from all manner of shell scripts.

Yad is available in Debian and Ubuntu repositories (and probably others).

Demo

Answer 5

C#, 814 bytes

Out of interest I decided to see how many bytes it would take to use a console application in C# using the mouse to change the checked state. There is no built in support so you have to use unmanaged code and it get's very long, very fast. There might be room for improvement but it's never going to be short.

Note: It does seem to change the checked state when the mouse is pressed and is moved at the same time. But seeing as this is never going to compete I decided to leave that be as a quirk.

using System;using System.Runtime.InteropServices;class P{static void Main(){int m=0,n=0,c=0;var h=GetStdHandle(-10);GetConsoleMode(h,ref m);SetConsoleMode(h,m&=~64);new System.Threading.Thread(()=>{for(;;){var r=new[]{new r()};ReadConsoleInput(h,r,1,ref n);Console.Clear();if(r[0].e==2&&r[0].m.s==1)Console.BackgroundColor=++c%2<1?0:(ConsoleColor)1;}}).Start();}[StructLayout((LayoutKind)2)] struct r{[FieldOffset(0)]public int e;[FieldOffset(4)]public m m;}struct m{int p;public int s;}[DllImport("kernel32.dll")]static extern IntPtr GetStdHandle(int h);[DllImport("kernel32.dll")]static extern bool GetConsoleMode(IntPtr h,ref int m);[DllImport("kernel32.dll")]static extern bool SetConsoleMode(IntPtr h,int m);[DllImport("kernel32.dll")]static extern bool ReadConsoleInput(IntPtr h,[Out]r[]r,int l,ref int n);}

And the formatted version:

using System;
using System.Runtime.InteropServices;

class P
{
    static void Main()
    {
        int m = 0, n = 0, c = 0;

        var h = GetStdHandle(-10);
        GetConsoleMode(h, ref m);
        SetConsoleMode(h, m &= ~64);

        new System.Threading.Thread(() =>
        {
            for (;;)
            {
                var r = new[] { new r() };
                ReadConsoleInput(h, r, 1, ref n);

                Console.Clear();
                if (r[0].e == 2 && r[0].m.s == 1)
                    Console.BackgroundColor = ++c % 2 < 1 ? 0 : (ConsoleColor)1;
            }
        }).Start();
    }

    [StructLayout((LayoutKind)2)]
    struct r
    {
        [FieldOffset(0)]
        public int e;
        [FieldOffset(4)]
        public m m;
    }

    struct m
    {
        int p;
        public int s;
    }

    [DllImport("kernel32.dll")]
    static extern IntPtr GetStdHandle(int h);

    [DllImport("kernel32.dll")]
    static extern bool GetConsoleMode(IntPtr h, ref int m);

    [DllImport("kernel32.dll")]
    static extern bool SetConsoleMode(IntPtr h, int m);

    [DllImport("kernel32.dll")]
    static extern bool ReadConsoleInput(IntPtr h, [Out]r[] r, int l, ref int n);
}

Answer 6

CSS, 46

Assumes a minimal HTML document, not unlike this CSS Hello World submission.

This one avoids the extra "X" of the old 42 char solution, making it conform with the rules.

NOTE: Seems to only work in Firefox (51.0.1)

* :after{content:'X'}*:active :after{all:unset

CSS, 42 (old solution)

:after{content:'X'}:active:after{all:unset

Answer 7

Java 1.4+, 104 bytes

import java.awt.*;interface g{static void main(String[]a){new Frame(){{add(new Checkbox());show();}};}}

-13 thanks to Kevin Cruijssen.

Groovy, 67 bytes

import java.awt.*;{new Frame(){{add(new Checkbox())setVisible(1)}}}

Answer 8

FLTK, 48 characters

Function{}{}{Fl_Window{}{}{Fl_Check_Button{}{}}}

Sample run:

bash-4.3$ fluid -c checkbox.fl 

bash-4.3$ fltk-config --compile checkbox.cxx 
g++ -I/usr/include/cairo -I/usr/include/glib-2.0 -I/usr/lib/x86_64-linux-gnu/glib-2.0/include -I/usr/include/pixman-1 -I/usr/include/freetype2 -I/usr/include/libpng16 -I/usr/include/freetype2 -I/usr/include/cairo -I/usr/include/glib-2.0 -I/usr/lib/x86_64-linux-gnu/glib-2.0/include -I/usr/include/pixman-1 -I/usr/include/freetype2 -I/usr/include/libpng16 -g -O2 -fvisibility-inlines-hidden -D_LARGEFILE_SOURCE -D_LARGEFILE64_SOURCE -D_THREAD_SAFE -D_REENTRANT -o 'checkbox' 'checkbox.cxx' -Wl,-Bsymbolic-functions -lfltk -lX11

bash-4.3$ ./checkbox

Sample output:

Answer 9

Vim: 13 Bytes Keystrokes

iq<Esc>:nm a g??<CR>

Press a and toggle between q and d (feels like a lever to me ...)

Explanation:

 iq<Esc>   " insert a q char
 nm a      " create a normal mapping toggled by a
 g??       " rot13 the current line, q -> d -> q ...
 <CR>      " validate the mapping

Answer 10

C#, 151 139 bytes

This is a longer approach than @satibel his answer, but it's completely different and doesn't require a form. Since I couldn't comment about if I could use key presses instead of mouse clicks (not enough rep.) I'm not 100% sure this is allowed, so let me know!

EDIT: Managed to lose 12 bytes thanks to some of my own improvements, and some are thanks to @TheLethalCoder

Golfed

using c=System.Console;class p{static void Main(){for(int _=1;;_++){c.ReadKey();_%=2;c.BackgroundColor=(System.ConsoleColor)_;c.Clear();}}}

Ungolfed

using System;
class p
{
    static void Main()
    {
        int _ = 0;
        for (int _=1;;_++)
        {
            Console.ReadKey(); //Wait for user input
            _%=2; //Prevent integer from overflowing at some point
            Console.BackgroundColor = (System.ConsoleColor)_; //Set Console background color to either 0 (black) or 1 (darkblue) depending on if our integer is even
            Console.Clear(); //Clear console window to get rid of input. This also causes the whole console window to change color
        }
    }
}

I know it's kind of tricky since it works with keypresses rather than mouseclicks, so let me know if that's allowed. If it's not, I'll happily remove my answer, or write a new one instead!

Answer 11

P5.js 35 26 bytes

function setup(){createCheckbox()}

not really fun, but it works.

setup=s=>createCheckbox()

-9 bytes thanks to Kritixi

Answer 12

Javascript, 24 23 21

for(i=0;;)alert(i=!i)

i=0;while(1)alert(i=!i)

i=0;while(1)alert(++i%2)

WARNING: Might cause you to have to force-quit your browser

This one is a neat solution because it actually is not a check box and has none of the logic of a check box, but on the surface behaves very similar to a check box (toggling change of state on button press) due to exploiting the action-based delay in javascript alerts, and meets all of the criteria of rules defined in the challenge.

Try it here (*Might cause you to have to force-quit your browser)

<script>for(i=0;;)alert(i=!i)</script>

Answer 13

C (Win32 Console application), 143 131 bytes

#include<windows.h>
main(){MSG m;for(CreateWindow("button","",1<<28|3,0,0,8,80,0,0,0,0);GetMessage(&m,0,0,0);DispatchMessage(&m));}

Answer 14

Red, 11 bytes

view[check]

The above code was rejected by SE as too short for a post, hence this addendum

Answer 15

Java, 69 bytes

a->{a.removeAll();a.add(new java.awt.Checkbox());a.setVisible(1>0);};

Just a not-so-self-explanatory Consumer<Frame>. It takes a Frame, removes everything in it, puts a checkbox, and then makes sure the Frame is displayed.

Answer 16

Coding, 21 bytes

>input(checkbox)@type

Finally a perfect time to use this language!

Answer 17

Racket, 98 bytes

#lang racket/gui
((λ(f)(new check-box%[parent f][label""])(send f show #t))(new frame%[label""]))

At least I have a few bytes on the Clojure answer!

Answer 18

VBA, 42 bytes

ActiveSheet.CheckBoxes.Add(1,1,8,8).Select

Best I could get with this!

Answer 19

 Emacs Lisp, 58

(and(widget-create'checkbox)(use-local-map widget-keymap))

Answer 20

VB.NET, 67 (program) + 37 (additional switches) = 104

VB.NET Windows Forms Application, 67 chars

Class F
Inherits Form
Dim C=New CheckBox With{.Parent=Me}
End Class

Compile it with

vbc.exe *.vb /main:F /imports:System.Windows.Forms

Not using /target:winexe switch. Assume that additional console is ok.

PS: Question about byte count.

Answer 21

JQuery, 50 Bytes

$("<input type=checkbox>").appendTo(document.body)

Answer 22

SAS, 145

proc pmenu catalog=work.c;menu m;item i dialog=d;dialog d '&1';text #1 @1 'A';checkbox #2 @1 'B';run;quit;%window w menu=work.c.m '';%display w;

This creates and displays a menu with an item that opens a dialogue box with a checkbox. It might be possible to golf it further, but I'm reluctant to try as this has already led to several crashed sessions :(

Answer 23

C# (Windows Form Application), 82 bytes

using System.Windows.Forms;class F:Form{public F(){Controls.Add(new CheckBox());}}

Saved bytes thanks to @Qwertiy

Answer 24

C++ with SFML, 401 bytes

-4 bytes thanks to Zacharý

#include<SFML\Graphics.hpp>
#include<cassert>
using namespace sf;int main(){RenderWindow w(VideoMode(300,300),"");Texture a,b;assert(a.loadFromFile("a.png")&&b.loadFromFile("b.png"));Sprite p(a),q(b);bool c=0;while(w.isOpen()){Event e;while(w.pollEvent(e)){if(e.type==Event::Closed)w.close();if(e.type==Event::MouseButtonPressed)c=!c;}w.clear(Color::White);if(c)w.draw(q);else w.draw(p);w.display();}}

Screenshot of the boxes :

Checked :

And unchecked :

This uses the SFML library The checkbox changes state on a sf::Event::MouseButtonPressed event ( left click, right click, middle click... )

If you want to test, after the creation of the render window, you may want to set the framerate limit to 60 fps ( using the line w.setFramerateLimit(60) ), so your computer won't burn.

This requires 2 checkboxes images in the directory where the app runs ( a.png and b.png ). For the reason it uses images, i don't know if my answer is invalid ( standard loophole ? ), but since it's needed to do graphic output...

Answer 25

Javascript, 14 bytes

alert(alert())

In most browsers, opening two alerts causes a checkbox to be added to the second that asks whether the user wants to keep allowing alerts.

I don't see anything in the rules that means it's not ok to first have a button that the user has to push before seeing the checkbox.

Answer 26

SVG, 79 characters

<svg><body xmlns="http://www.w3.org/1999/xhtml"><input type="checkbox"/></body>

Yes, there is a closing tag missing, but FireFox and Chrome display it ok.

Answer 27

Funky 2, 83 Bytes

withdraw withnewWindow(){whenonDraw{setColor(a,1)box(0,0,8,8)}whenonMouseDown a=!a}

Cleaned up and commented

with draw{                  $# With the draw library
    with newWindow(){       $# Open a new window with the default parameters
        when onDraw{        $# Each draw frame of the window. This can't be placed in onMouseDown due to Funky2 Automatically clearing the window
            setColor(a,1)   $# Set the color to either Green or Yellow depending on if a is 1 or not (Set color automatically adds arguments)
            box(0,0,8,8)    $# Draw a box of size 8 by 8.
        }
        when onMouseDown{   $# When any mouse button is clicked
            a=!a            $# Set a to not a. Conveniently, setColor casts it's argument to a number, so this flips between 0 and 1.
        }
    }
}

Output

Answer 28

Desmos, 34 bytes

Expressions(27 bytes):

min(x,y)<9
C=hsv(0,0,a)
a=1

(Make sure to select the color corresponding to C for min(x,y)<9, set the fill opacity for min(x,y)<9 to 1, and make sure that the graph is on the default viewport.)

On-click statement(6 bytes):

a->1-a

(27+6 is 33 bytes, but I have to add one byte because of this.)

Clicking anywhere on the graph will switch the color of the graph from white to black and vice versa.

Try It On Desmos!

Try It On Desmos! - Prettified