0

私はこのマークアップを私のWebページの1つに持っています。

<div class="radio-spoof">
    <input type="radio" name="enquiry" value="General enquiry" class="radio"/>
    <div class="checked"></div>
</div>
<label for="general_enquiry">General enquiry</label>
<div class="radio-spoof">
    <input type="radio" name="enquiry" value="Request a brochure" class="radio" checked="true"/>
    <div class="checked"></div>
</div>
<label for="request_a_brochure">Request a brochure</label>

基本的に私がやっていることは、いくつかのラジオボタンをスプーフィングしようとしているので、見栄えの良いものを作ることができます。ラジオがチェックされているとき、デフォルト.checkedで設定されているものを表示したいと思いdisplay:noneます。DOMReadyでチェックされたラジオボタンをチェックする必要があります。ラジオがクリックされるたびに、現在このページが表示されますが、.checkeddivが正しく選択されていないようです。

if($('input[type=radio]:checked')) {
console.log("!");
$(this).parent().children('div').show();
}

上記のコードでラジオボタンの親を選択し、子div（.checked）を探して表示することを期待します。私は間違っていますか？`

4

4 に答える 4

0

上記の問題については、コードビンの解決策を実行しました。だから、http：//codebins.com/codes/home/4ldqpb6で試してみてください

解決：

$(document).ready(function() {
    $('input[type=radio]').each(function() {
        if ($(this).is(':checked')) {
            $(this).next('.checked').show();
        }
        $(this).click(function() {
            if ($(this).is(':checked')) {
                $(this).next('.checked').show();
            }
        });
    });
});
于 2012-07-09T11:08:51.510 に答える
0

カスタムスタイルのラジオボタンを取得しようとしているように思われますか？私がプロジェクトで持っていたJSなしのかなりクールな方法はこれでした（あなたのコードに適応しました）：

HTML

<div class="radio-spoof">
    <input id="radio-1" type="radio" name="enquiry" value="General enquiry" class="radio"/>
    <label for="radio-1">General enquiry</label>
</div>

CSS

.radio-spoof input {
  position: absolute;
  left: -9999px;
} /* not display: none so it is tabbable */

.radio-spoof label {
  display: inline-block;
  padding-left: 35px; /* width of your custom image + spacing to text */
  height: 30px;
  line-height: 30px; /* height of your custom image */
  background: url(your/custom/image) center left no-repeat;
}

.radio-spoof input:checked + label {
  background-image: url(your/custom/active/image);
}

チェックボックスは、ラベルがクリックされるたびに切り替わり、入力IDとラベルを介して接続され、ラベルは入力スタイルを取得します。

チェックボックスがチェックされていない場合にデフォルトのように見せたい場合は、次のように設定できます。

CSS

.radio-spoof input + label { display: none }

.radio-spoof input:checked {
  position: absolute;
  left: -9999px;
}

.radio-spoof input:checked + label {
  display: inline-block;
  padding-left: 35px; /* width of your custom image + spacing to text */
  height: 30px;
  line-height: 30px; /* height of your custom image */
  background: url(your/custom/image) center left no-repeat;
}

次に、デフォルトのラジオがあり、それらがチェックされている場合、ラベルが代わりに使用されます...

于 2012-07-09T11:23:59.160 に答える
0

チェックボックスの状態が変化したときにイベントを登録する必要があるデモ：http： //jsfiddle.net/FtPLS/2/ または http://jsfiddle.net/QCkpG/1/

  • .nextまた、の代わりに使用する必要があると思います.children。
  • 非表示にしたい場合.checkedは、これを実行してください=>$('.checked').hide()
  • $('input[type=radio]').is(':checked')チェック/チェック解除条件に使用できます。

これが原因に役立つことを願っています、:)

コード

$(function() {
    // here ==> $('.checked').hide(); will hide all the div with checked class
    $('input').click(function() { // can use .change instead if you want
        if ($('input[type=radio]').is(':checked')) {
            alert('!')
            $(this).parent().next('div').show(); // whatever you wanna show or 
            //$(this).next('div').show();
        }
    });
});​
于 2012-07-09T10:50:15.100 に答える
0 
$(function(){
  $(':radio').change(function(){
    var $this = $(this);
    console.log($this);
    $(':radio[name='+this.name+']').next().hide();
    if($this.is(':checked')){
      $this.next('.checked').show();
    }
  });
});
于 2012-07-09T11:14:43.603 に答える