2016-08-26 4 views
1

私はいくつかのラジオボタンの単純なリストを持っているだけでキャプチャするように見えることはできません。私はSOとYouTubeで見つかった複数の可能な解決策を試しましたが、何も動作していないようです。jQuery正しくラジオの変更をキャプチャする方法

<ul id="shipping_method"> 
        <li> 
        <div class="shipping-block"><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate4" value="flat_rate:4" class="shipping_method" /><label for="shipping_method_0_flat_rate4"> 
        <div class="shipping-block-row clearfix"> 
        <div class="shipping-radio"></div> 
        <div class="shipping-title"> 
        <h3>Delivery 1</h3> 
        </div> 
        <div class="shipping-price">5,00 €</div> 
        </div> 
        <div class="shipping-description"><p>Description 1</p></div></label> 
       </div> 
         </li> 
         <li> 
        <div class="shipping-block"><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_pickup3" value="local_pickup:3" class="shipping_method" /><label for="shipping_method_0_local_pickup3"> 
        <div class="shipping-block-row clearfix"> 
        <div class="shipping-radio"></div> 
        <div class="shipping-title"> 
        <h3>Delivery 2</h3> 
        </div> 
        <div class="shipping-price">3,00 €</div> 
        </div> 
        <div class="shipping-description"><p>Description 2</p></div></label> 
        </div> 
         </li> 
</ul> 

、ここでjQueryの(私は等の変化に、変更を試してみました)されています:

jQuery(document).ready(function(){ 

    $('input[type="radio"]').change(function() { 
     alert(this.value); 
    }); 

}); 

Here is a jsFiddle with the sample data

+2

あなたはjQueryのにロードすることを忘れていました。確かに、それは簡単だった:) –

+0

よくjQueryがロードされています。変更機能の外に警告しようとすると、指定されたメッセージが警告されます。 – Domas

+0

このフィドルは問題を再現しません。私は設定を確認し、jQueryがロードされていないことを認識しました。ロードされているはずの作業が開始されました。 –

答えて

-1

がここにある。ここ

は、サンプルHTMLですフィドルを更新しました。

jQuery(document).ready(function(){ 
 

 
    $('input[type="radio"]').change(function() { 
 
     alert(this.value); 
 
    }); 
 
\t \t 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="shipping_method"> 
 
\t \t \t \t \t <li> 
 
        <div class="shipping-block"><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate4" value="flat_rate:4" class="shipping_method" /><label for="shipping_method_0_flat_rate4"> 
 
        <div class="shipping-block-row clearfix"> 
 
        <div class="shipping-radio"></div> 
 
        <div class="shipping-title"> 
 
        <h3>Delivery 1</h3> 
 
        </div> 
 
        <div class="shipping-price">5,00 €</div> 
 
        </div> 
 
        <div class="shipping-description"><p>Description 1</p></div></label> 
 
       </div> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li> 
 
        <div class="shipping-block"><input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_pickup3" value="local_pickup:3" class="shipping_method" /><label for="shipping_method_0_local_pickup3"> 
 
        <div class="shipping-block-row clearfix"> 
 
        <div class="shipping-radio"></div> 
 
        <div class="shipping-title"> 
 
        <h3>Delivery 2</h3> 
 
        </div> 
 
        <div class="shipping-price">3,00 €</div> 
 
        </div> 
 
        <div class="shipping-description"><p>Description 2</p></div></label> 
 
        </div> 
 
\t \t \t \t \t \t </li> 
 
</ul>

関連する問題