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

【问题标题】：radio hide. show div class instead. on click of div select linked radio无线电隐藏。改为显示 div 类。单击 div 选择链接的收音机
【发布时间】：2013-02-27 09:38:55
【问题描述】：

试图让这个工作。而不是显示普通收音机，或用图像替换收音机。我想用一个 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;}

【问题讨论】：

请不要在回答者指出代码错误后编辑它们。
您正在应用基于类的 if/else 语句，但在 if else 语句之后才应用类。
试图插入一个 div 来替换默认的单选按钮。
<class='radioButtonOn' /> 不是 div。这……嗯……不过是格式错误的代码。
true 我还没有实现标记。它应该插入
标签
???

标签： javascript jquery css ajax

【解决方案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' />"));

【讨论】：

谢谢 ;) 认为我需要为悬停状态添加模糊功能，而不是在 css 中将其作为悬停？
是的，开始认为这就是问题所在。试图让 div 充当按钮来替换默认收音机。并将文本放入 div 按钮。
仍然没有看到如何将它们组合在一起。有点棘手