/    Sign up×
Community /Pin to ProfileBookmark

How can I make buttons that behave like radio buttons?

I’m trying to make buttons in a sidebar that act like radio buttons. I’ve applied an event listener to each one after having put the buttons in an array. I’m not sure how to make it so that only one can be in the pressed state (and stays there). Also, would anyone be able to tell me how I can change the CSS style for the pressed button?

Thanks

`radioButtons = Array.from(document.getElementsByClassName(“radioBtn1”));
textMsg = document.getElementById(“titleMsg”);

radioButtons.forEach(button => {
button.addEventListener(“click”, button => {
currentScreen = button.target.name;
textMsg.innerHTML = button.target.name;
console.log(button.target.name);
});
});
`

to post a comment
CSSJavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumJan 10.2020 — This can be done by Javascript, however it's easy to do it by pure CSS.
<input id="rb1" type="radio" name="radiogroup1">
<label for="rb1">Radiobutton 1</label>
<input id="rb2" type="radio" name="radiogroup1">
<label for="rb2">Radiobutton 1</label>
<input id="rb3" type="radio" name="radiogroup1">
<label for="rb3">Radiobutton 1</label>
<style>
input[name="radiogroup1"] {
display: none;
}
input[name="radiogroup1"]+label {
/* style passive state as you like */
border: 3px outset lightgrey;
}

<i> </i> input[name="radiogroup1"]:checked+label {
<i> </i> /* style checked state as you like */
<i> </i> border: 3px inset lightblue;
<i> </i> }
<i> </i>&lt;/style&gt;

This makes use of the checkbox trick:

https://css-tricks.com/the-checkbox-hack/

Benefits:

No logic need to be coded to make shure that only one button is checked.

If used in a form the status is available as a GET/POST parameter.
Copy linkTweet thisAlerts:
@me1986authorJan 10.2020 — @Sempervivum#1612878 Thanks! it works :)
Copy linkTweet thisAlerts:
@siddhi_patelJan 21.2020 — Hi...

You can done this by tow way using css or using javascript...

Like....

``<i>
</i>&lt;input id="rb1" type="radio" name="rb1"&gt;
&lt;label for="rb1"&gt;Male&lt;/label&gt;
&lt;input id="rb2" type="radio" name="rb1"&gt;
&lt;label for="rb2"&gt;Female&lt;/label&gt;
&lt;style&gt;
input[name="rb1"] {
display: none;
}
input[name="rb1"]+label {
/* style passive state as you like */
border: 3px outset lightgrey;
}
&lt;/style&gt;<i>
</i>
``
Copy linkTweet thisAlerts:
@HarshShahJan 22.2020 — Heyy you can also done without javascript.

Use this code to make button like radiobutton.

HTML script

&lt;ul class="donate-now"&gt;<br/>
&lt;li&gt;&lt;label for="a25"&gt;&lt;input type="radio" id="a25" name="amount"&gt;$25&lt;/label&gt;&lt;/li&gt;<br/>
&lt;li&gt;&lt;label for="a50"&gt;&lt;input type="radio" id="a50" name="amount"&gt;$50&lt;/label&gt;&lt;/li&gt;<br/>
&lt;li&gt;&lt;label for="a75"&gt;&lt;input type="radio" id="a75" name="amount" checked="checked"&gt;$75&lt;/label&gt;&lt;/li&gt;<br/>
&lt;/ul&gt;


CSS script

.donate-now {<br/>
list-style-type:none;<br/>
margin:25px 0 0 0;<br/>
padding:0;<br/>
}<br/>
.donate-now li {<br/>
float:left;<br/>
margin:0 5px 0 0;<br/>
}<br/>
.donate-now label {<br/>
padding:5px;<br/>
border:1px solid #CCC; <br/>
cursor:pointer;<br/>
}<br/>
.donate-now label:hover {<br/>
background:#DDD;<br/>
}
Copy linkTweet thisAlerts:
@dravenwalkerSep 15.2022 — Thank you for sharing your problem and you can listen to the radio here: https://radiofmluisteren.nl/
×

Success!

Help @me1986 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...