Make a word a radio button?

Question

I want to have two options: yes and no. I want the user to have to select one so obviously I'd go with a radio button but is there a way I can set it so that the user can just click on yes or no instead of a radio button in order to select their choice? Thanks in advance for any help

is it nessery for u using radio inputs ? if not you can do it easier with `` tag and with simple javaScript, if yes then explain yourself better you want to replace the radio buttons with Strings ? — Danny, Apr 19 '15 at 19:44
I think Mikey understood my question the best. I probably didnt explain it very well, sorry about that. I want the actual word to be the radio button so that there isn't the little circle thing next to it. — JustinLG99, Apr 19 '15 at 20:02
then why you need to involve js ? this can be done with pure css http://jsfiddle.net/YB8UW/9/ — Danny, Apr 19 '15 at 20:08
I would much prefer it without it but is there a way to make the actual text itself the radio button without it? — JustinLG99, Apr 19 '15 at 20:34

score 1 · Answer 1 · answered Apr 19 '15 at 19:55

I'd go on @sal niro option, but if you have other plans for the radio(I'm not sure because you'r question require more explnation) here is an example for using jQuery to trigger a radio input type by a simple div click.

$(function() {
    $("#yes").click(function(e) {
        $("#rYes").click();
    });
    
    $("#no").click(function(e) {
        $("#rNo").click();
    });
});

#yes, #no {
    display: inline;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="yes">Yes</div> | <div id="no">No</div> <br />
Yes result:<input type="radio" name="test" id="rYes" />  <br />
No Result: <input type="radio" name="test" id="rNo" />

jsFiddle Example

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

Yes, if you use a <label> then this will associate the label text with the input field.

You can either use the for attribute or wrap the label around the input field.

See this related question - Should I put input tags inside a label tag?

edited May 23 '17 at 12:22

Community

1
1

answered Apr 19 '15 at 19:50

Asta

1,569
13
23

score 0 · Answer 3 · answered Apr 19 '15 at 19:51

I do quite believe you're asking how to produce a radio button with yes and no. If so,do this:

<form action="">
<input type="radio" name="buttona" value="yes">Yes<br>
<input type="radio" name="buttonb" value="no">No
</form>

Here is what each sentence does:

input type="radio" Basically states that the type of form you want the user to interact with are the 2 radio buttons

**name="buttona"**Basically states what group of radio buttons this belongs to,so that if only one button is clicked,the rest are unselected.

Yes This is what you what appears next to the buttons.

Hope this helped.

Michelangelo · Accepted Answer · 2015-04-19T19:57:05.853

0

You could go for a solution like this too, it requires some Javascript: fiddle

<button value="yes">Yes</button>
<button value="no">No</button>

JS

var buttons = document.getElementsByTagName('button');
for (i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function () {
        alert(this.value);
    }, false)
    }

edited Apr 19 '15 at 19:57

answered Apr 19 '15 at 19:51

Michelangelo

5,888
5
31
50

You don't need Javascript, you can use a label tag which would be better practice for accessibility etc. – Asta Apr 19 '15 at 19:53
It would be worth editing your post to suggest it as an alternative solution. Just remove the bit about needing Javascript. – Asta Apr 19 '15 at 19:55
@Asta Yup maybe you are right, but I did not read the question like you did. It is confusing :) – Michelangelo Apr 19 '15 at 19:56
This is what I was looking for thank you Mikey. Would you by chance know of any way to get rid of the box around the text? I think it would look a lot sleeker if it was just the text that you clicked rather than a button. Thank you again – JustinLG99 Apr 19 '15 at 20:05
@JustinLG99 See this fiddle http://jsfiddle.net/4ye4ytx4/1/ no styling on the button – Michelangelo Apr 19 '15 at 20:08
One last thing, I want it to be a radio button within a form, so I just need to be able to select it and not have an alert pop up. I'm not too familiar with Javascript so I'm not sure how to take the alert off – JustinLG99 Apr 19 '15 at 20:15
Why would you do this with javascript? – scniro Apr 19 '15 at 20:26
@salniro The question wasn't very clear, but also to capture the selected value. However if you don't need the javascript. Take the js out and do something like this: http://jsfiddle.net/4ye4ytx4/3/ – Michelangelo Apr 19 '15 at 20:57
@Mikey I gotcha here. Actually the button solution is quite clever in this sense as an alternative to radio inputs – scniro Apr 19 '15 at 21:03

Make a word a radio button?

4 Answers4