# Switch with createCheckbox()
**URL:** https://discourse.processing.org/t/switch-with-createcheckbox/28945
**Category:** Coding Questions
**Created:** [March 29, 2021, 11:38am UTC](https://discourse.processing.org/t/switch-with-createcheckbox/28945 "2021-03-29T11:38:19Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Mem](https://discourse.processing.org/u/Mem)
#### Post date: [March 29, 2021, 11:38am UTC](https://discourse.processing.org/t/switch-with-createcheckbox/28945/1 "2021-03-29T11:38:19Z")
Hi Again
Sorry, I’m a beginner, I didn’t understand what was formatting the code. I hope now I will get some help 🙂
I would like to be able to select different circle A and B with a createCheckbox()
What I want is when the A is selected then we select the B, the circle A should disappear and the checkbox A must be unchecked
Right now when I check the A then I check the B the A remain checked
What is wrong with my code?
Thank you for your help
Here is the exemple :
```auto
var checkbox_a, checkbox_b;
var checkbox_a_go, checkbox_b_go;
function setup() {
createCanvas(400, 400);
checkbox_a = createCheckbox(“A”, false);
checkbox_a.position(20, height + 20);
checkbox_a.changed(aaa);
checkbox_b = createCheckbox(“B”, false);
checkbox_b.position(60, height + 20);
checkbox_b.changed(bbb);
}
aaa = function(){
checkbox_a_go = !checkbox_a_go;
if(this.checked()){
//checkbox_b_go = false;
//checkbox_c_go = false;
}
}
bbb = function(){
checkbox_b_go = !checkbox_b_go;
if(this.checked()){
//checkbox_a_go = false;
// checkbox_c_go = false;
}
}
function draw() {
background(220);
if(checkbox_a_go === true){
ellipse(50,50,100,100)
}
if(checkbox_b_go === true){
ellipse(200,200,200,200)
}
}
```
---
### Author:  [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)
#### Post date: [March 29, 2021, 12:33pm UTC](https://discourse.processing.org/t/switch-with-createcheckbox/28945/2 "2021-03-29T12:33:35Z")
Hi,
you have several ways to achieve it. The best way would be to use `radio` inputs instead of `checkbox` ones. By grouping them, you will be able to select only one of them by default.
Then you’ll need only to hide your input.
If we stay on what you already have here, you’ll need first to uncheck the input, accessible by the `elt` property of your `checkbox_b` :
```auto
checkbox_a.elt.children[0].checked = false; // elt is actually a div containing both the input and its label. We use the children property to access to your input
console.log('hide a', checkbox_a.elt.children)
```
And then, hide the element by using the built-in fonction of `p5.element` : `hide()`.
So, in total, you’ll have :
```auto
function bbb(){
if (checkbox_a_go){ // if a already checked
checkbox_a.elt.children[0].checked = false;
console.log('hide a', checkbox_a.elt)
// checkbox_b_go = false; // depends on what you want
checkbox_a.hide();
}
}
```
---
### Author:  [@Mem](https://discourse.processing.org/u/Mem)
#### Post date: [March 31, 2021, 3:17pm UTC](https://discourse.processing.org/t/switch-with-createcheckbox/28945/3 "2021-03-31T15:17:25Z")
createRadio works well if the values are numbers or color names. Thank for your help 🙂
But if I’d like to switch different shapes likes circle, rectangle etc… or, call several functions with radio, what should I do?
Thank you in advance.
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [March 31, 2021, 4:44pm UTC](https://discourse.processing.org/t/switch-with-createcheckbox/28945/4 "2021-03-31T16:44:09Z")
If you want to go wild you can use the value as a function name
[https://editor.p5js.org/micuat/sketches/2mpnvWg0b](https://editor.p5js.org/micuat/sketches/2mpnvWg0b)
But I would recommend using switch-case instead 🙂
---
### Author:  [@Mem](https://discourse.processing.org/u/Mem)
#### Post date: [April 1, 2021, 12:27pm UTC](https://discourse.processing.org/t/switch-with-createcheckbox/28945/5 "2021-04-01T12:27:26Z")
Thank you for your recommendation but my level is not good enough to associate checkbox and switch-case. Unless you know tutorial that fit my goal.
If I stick with radio.
I understood that the radio.value() works when its parameters correspond to the pre-existing functions like “rect”, “circle”.
But is it possible to switch between different functions created by me?
Thank you for your help
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [April 1, 2021, 2:44pm UTC](https://discourse.processing.org/t/switch-with-createcheckbox/28945/6 "2021-04-01T14:44:02Z")
for example: [p5.js Web Editor](https://editor.p5js.org/micuat/sketches/hFUxd1JEv)
But if you are a beginner, I recommend you to follow tutorials first:
https://www.youtube.com/embed/videoseries?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&wmode=transparent&rel=0&autohide=1&showinfo=1&enablejsapi=1
---
### Author:  [@Mem](https://discourse.processing.org/u/Mem)
#### Post date: [April 1, 2021, 3:03pm UTC](https://discourse.processing.org/t/switch-with-createcheckbox/28945/7 "2021-04-01T15:03:56Z")
Thanks, not a such beginner 😂 but Dan is fantastic I watched like more than 100 of this video
Still have the same question 🙂
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [April 1, 2021, 3:51pm UTC](https://discourse.processing.org/t/switch-with-createcheckbox/28945/8 "2021-04-01T15:51:44Z")
did you check the sketch I posted?
sorry but I’m not kidding - switch-case is a basic structure, and even though you don’t know it, you can achieve basically the same thing with if-else in this case.
---
### Author:  [@Mem](https://discourse.processing.org/u/Mem)
#### Post date: [April 5, 2021, 8:29am UTC](https://discourse.processing.org/t/switch-with-createcheckbox/28945/9 "2021-04-05T08:29:13Z")
Hello thanks for your help,
Yes, I red your code exemple
I was not clear enough
I would like to use my own function (not the pre-existing function like circle, rect)
Like this: function candy(), function car(), etc.
I’d like to associate them to createRadio.
Is it possible ?
```auto
let radio;
function setup() {
createCanvas(400, 400);
radio = createRadio();
radio.option('rect');
radio.option('circle');
radio.selected('rect');
}
function draw() {
background(220);
this[radio.value()](200,200,100)
}
function candy(){
triangle(50,50,100,75,50,100);
circle(150,75,100);
triangle(200,75,250,50,250,100);
}
```
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [April 5, 2021, 8:40am UTC](https://discourse.processing.org/t/switch-with-createcheckbox/28945/10 "2021-04-05T08:40:08Z")
sorry, forget about `this[radio.value()]` because it’s not a good practice.
could you simply do something like this? (not tested)
```javascript
switch(radio.value()) {
case "candy":
candy();
break;
case "car":
car();
break;
}
```
or is this still not clear to you?
---
### Author:  [@Mem](https://discourse.processing.org/u/Mem)
#### Post date: [April 5, 2021, 1:41pm UTC](https://discourse.processing.org/t/switch-with-createcheckbox/28945/11 "2021-04-05T13:41:59Z")
Great help Micuat. I got it, It’s working ! 🙂