javascript - radio 隐藏。改为显示 div 类。单击 div 选择链接的 radio

Question

试图让这个工作。而不是显示普通 radio ，或用图像替换 radio 。我想用一个 div 替换它，我可以将其打扮成一个按钮，悬停时类发生变化，单击类发生变化。但也点击隐藏的 radio 被选中。但也要求标签(引用文本显示的标签，例如下面的 .co.uk .com .net 等)位于 div/按钮内。或者能够将文本添加到 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;}

Answer 1

看起来你的选择器有问题；您缺少属性过滤器周围的左大括号。所以

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

应该是

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

---

此外，除非您专门使用 1.6 版的 jQuery，否则您的代码应该可以工作，但是，

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

是检查单选按钮是否被选中的首选方法，而不是

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

参见 this link获取更多信息。

---

当然还有这个

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

其实没有什么意义。我想你的意思是:

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