无线电隐藏。 改为显示div类。 单击div选择链接的收音机

Question

trying to get this working. Instead of showing the normal radio, or replacing the radio with an image. i would like to replace it with a div i can dress up as a button and on hover the class changes and on click the class changes. but also on click the hidden radio is selected. but also require the label (label in reference to the text showing eg as below .co.uk .com .net etc.) to be inside the div/button. or be able to add text to the div button. is this possible?

$(function() {
    $("input [name='domain_ext']").each(function() {
        if ($(this).prop('checked')) {
            $(this).hide();
            $(this).after($("< class='radioButtonOff' />"));
        } else { 
            $(this).hide();
            $(this).after($("<class='radioButtonOn' />"));
        }
    });

    $("input.radio").click(function() {
        if($(this).attr('src') == 'radiobuttonOn') {
            $(this).attr('src', 'radiobuttonOff');
            $(this).prev().attr('checked', 'false');
        } else { // its not checked, so check it
            $(this).attr('src', 'radioButtonOn');
            $(this).prev().attr('checked', 'true');
        }
    });
});

HTML

<table class="domain_ext_ribbon">
  <tr>
    <td><label>
      <input type="radio" name="domain_ext" value="all"  />
      All</label></td>
    <td><label>
      <input type="radio" name="domain_ext" value=".co.uk"  />
      .co.uk</label></td>
    <td><label>
      <input type="radio" name="domain_ext" value=".com" />
      .com</label></td>
  </tr>
  <tr>
    <td><label>
      <input type="radio" name="domain_ext" value=".net"  />
      .net</label></td>
    <td><label>
      <input type="radio" name="domain_ext" value=".org"  />
      .net</label></td>
    <td><label>
      <input type="radio" name="domain_ext" value=".biz" />
      .net</label></td> 
  </tr>
</table>

css

.radioButtonOff { width: 60px; height: 20px; background: #000000;}
.radioButtonHover { width: 60px; height: 20px; background: #666666;}
.radioButtonOn { width: 60px; height: 20px; background: #999999;}

Answer 1

It looks like you have a bug in your selector; you're missing the opening brace around your attribute filter. So

$("input name='domain_ext']")

should be

$("input [name='domain_ext']")

---

Also, unless you're using specifically version 1.6 of jQuery, your code should work, but,

if ($(this).prop('checked'))

is the preferred way to check to see if a radio button is checked, as opposed to

if ($(this).attr('checked'))

See this link for more information.

---

And of course this

$(this).after($("<class='radioButtonOn' />"));

doesn't really make much sense at all. I think you meant:

$(this).after($("<div class='radioButtonOff' />"));