clickable buttons instead of radio buttons

Question

I want click able buttons instead of radio buttons. I saw an example on jsfiddle but only problem is I don't have labels tags in my code. I don't have access to code, so I cant add them either. I can only add javascript and css to my CMS. Is there any way to achieve results?

<div class="button1">
    <input type="radio" checked="" value="1" name="question">question 1
</div>
<div class="button2">
    <input type="radio" value="2" name="question">question 2
</div>

I got solution here but its not working in IE.

$(function() {
    $('.container input[type="radio"]').each(function(index) {
        console.log($(this));
        $(this).attr('id', 'radio' + index);
        var label = $('<label />', {'for': 'radio' + index}).html($(this).parent().html());
        $(this).parent().empty().append(label);
    });
    $('label').click(function () {
       $('label').removeClass('selected');
       $(this).addClass('selected');
    });        
});

If you don't have access to the HTML how are you going to add buttons? — tymeJV, Jun 18 '14 at 13:13
I guess this is a duplicate of http://stackoverflow.com/questions/8584098/how-to-change-an-element-type-using-jquery ? — James, Jun 18 '14 at 13:32
You can replace the content of button1 and 2 with desired content using jquery. Or just add the label to button1/2 then apply the needed css to achieve what you want — Huangism, Jun 18 '14 at 14:10
What does “not working” mean? It crashes IE? It shows pictures of cats instead of your buttons? — Dour High Arch, Jun 19 '14 at 01:01
buttons are not click able anymore in IE. I checked source code and cant find label tags implemented in IE — user3752575, Jun 19 '14 at 12:55
As I asked in the comments of my answer: Which version of IE do you use? Because it works fine for me in IE 10. — Tobbe, Jun 19 '14 at 22:28

score 1 · Answer 1 · answered Jun 18 '14 at 13:32

1

To get this functionality, you have to wrap your inputs (and the description) in a label. Assuming that your radio is always in a seperate container, this is possible with this piece of code:

$('.container input[type="radio"]').each(function(index) {
    console.log($(this));
    $(this).attr('id', 'radio' + index);
    var label = $('<label />', {'for': 'radio' + index}).html($(this).parent().html());
    $(this).parent().empty().append(label);
});

working jsfiddle: http://jsfiddle.net/VyvpP/

answered Jun 18 '14 at 13:32

Tobbe

121
5

You rock!! This worked.. but my div class is different for each radio ie button1, button2 ... how should i manage that? – user3752575 Jun 18 '14 at 13:44
If you change the first selector from `.container input[type="radio"]` to `input[type="radio"]` it will execute for all radios, independent of the class of the wrapping div. If you only want to convert some radios, but not all, change it to a comma separated list: `.container1 input[type="radio"], .container2 input[type="radio"]`. You can use every css valid selector you want, to select the radios. – Tobbe Jun 18 '14 at 13:50
For some reason selection process is not working in IE. Any suggestions? – user3752575 Jun 18 '14 at 14:40
if i hide radio button using display:none then IE is every times select 1st option only. – user3752575 Jun 18 '14 at 14:58
only if you hide the radio button? Because this works fine for me. Which version of IE do you use? – Tobbe Jun 18 '14 at 15:33
I can show you my site, but cant post user / pass here. Is there any way to send PM? – user3752575 Jun 20 '14 at 14:12
AS far as I know - no. But you can just simply answer my question: Which version of IE do you use? And which version of jQuery? – Tobbe Jun 20 '14 at 21:53

score 0 · Answer 2 · answered Jun 18 '14 at 13:30

If, what I think you're asking is that you have a radio button in the guise of a clickable button, this should do you:

-webkit-appearance:none

http://jsfiddle.net/54ek6/

You can hide the radio button with -webkit-appearance:none; and using :before psuedo classes, add in the labels.

This does not work on IE. (Just so you know!)

score 0 · Answer 3 · answered Jun 18 '14 at 13:44

if you want something like this:

just copy and paste:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">   </script>
 <script>
$(document).ready(function(){
  $("#rad").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<input type="radio" checked="" value="1" name="question" id="rad">
</body>
</html>

clickable buttons instead of radio buttons

3 Answers3

Linked