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

Posted

技术标签:

【中文标题】无线电隐藏。改为显示 div 类。单击 div 选择链接的收音机【英文标题】:radio hide. show div class instead. on click of div select linked radio 【发布时间】: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 来替换默认的单选按钮。 &lt;class='radioButtonOn' /&gt; 不是 div。这……嗯……不过是格式错误的代码。 true 我还没有实现标记。它应该插入 标签 ??? 【参考方案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 按钮。 仍然没有看到如何将它们组合在一起。有点棘手

以上是关于无线电隐藏。改为显示 div 类。单击 div 选择链接的收音机的主要内容,如果未能解决你的问题,请参考以下文章

html 根据单选按钮显示隐藏Div单击

单击提交后如何获取选定的单选按钮以显示特定的隐藏 div?

要在单选按钮上单击来自其他 JSP 的另一个 div 中的数据,请单击 ajax

使用单选按钮显示/隐藏 div 的多种重力形式验证

jQuery Checkbox 有时只切换 div

js 怎么用一个按钮控制DIV来回显示和隐藏