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

セレクターにバグがあるようです。属性フィルターを囲む左中かっこがありません。そう

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

する必要があります

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

また、特にバージョン 1.6 の jQuery を使用していない限り、コードは機能するはずですが、

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

とは対照的に、ラジオボタンがチェックされているかどうかを確認するための推奨される方法です。

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

詳細については、このリンクを参照してください。

そしてもちろんこれ

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

あまり意味がありません。私はあなたが意味したと思います：

$(this).after($("<div class='radioButtonOff' />"));
于 2013-03-12T01:24:00.183 に答える