0

试图让这个工作。而不是显示普通收音机，或用图像替换收音机。我想用一个 div 替换它，我可以装扮成一个按钮，悬停类更改并单击类更改。而且点击隐藏的收音机也被选中。但还要求标签（标签参考文本显示，例如如下所示 .co.uk .com .net 等）位于 div/button 内。或者能够将文本添加到 div 按钮。这可能吗？

$(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;}
4

1 回答 1

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' />"));
于 2013-03-12T01:24:00.183 回答