Question

试图让这个工作。而不是显示正常的无线电，或用图像替换无线电。我想用一个div替换它我可以打扮成一个按钮并悬停类更改并单击类更改。而且还点击隐藏的电台被选中。但也要求标签（参考文本的标签，例如下面的.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']")

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

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

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

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

有关详细信息，请参阅this link。

当然这个

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

根本没有多大意义。我想你的意思是：

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

收音机隐藏。显示div类。点击div选择链接收音机

1 个答案: