2017-01-01 5 views
0

私は3つのラジオボタンを持っています。 1つ目のラジオボタン(つまりsel_address)をクリックするたびにページを更新したい。ユーザーが選択したアドレスをクリックするとページが更新されるはずです。他の2つのラジオボタンをクリックしてページをリフレッシュする必要はありません。これを達成するには?最初のラジオボタンで、更新ページをクリック

$("input[name='delivery_option']").eq(0).click(function() { 
 
    console.log('First was clicked'); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="option sel_address"> 
 
    <input type="radio" value="sel_address" name="delivery_option" id="sel_address"> 
 
</label> 
 
<strong>selected address</strong> 
 

 
<label class="option your_school"> 
 
    <input type="radio" value="your_school" name="delivery_option" id="your_school"> 
 
</label> 
 
<strong>school</strong> 
 

 
<label class="option rhs_showroom"> 
 
    <input type="radio" value="showroom" name="delivery_option" id="showroom"> 
 
</label> 
 
<strong>Showroom</strong>

または:first pseudo class selector

<label class="option sel_address"> 
     <input type="radio" value="sel_address" name="delivery_option" checked="checked" id="sel_address"> 
</label> 
<strong>selected address</strong> 

<label class="option your_school"> 
    <input type="radio" value="your_school" name="delivery_option" id="your_school"> 
</label> 
<strong>school</strong> 

<label class="option rhs_showroom"> 
    <input type="radio" value="showroom" name="delivery_option" id="showroom"> 
</label> 
<strong>Showroom</strong> 

<script type="text/javascript"> 
    $("input[name='delivery_option']").click(function() { 
     . 
     . 
     var delivery_value = $(this).val(); 
     if(delivery_value == "your_school" || delivery_value == "showroom"){ 
      //some code 
     }else{ 
      .. 
     } 
    } 
+0

'に見て:first'セレクター:https://api.jquery.com/first-selector/ – BeNdErR

答えて

1

あなただけの最初の要素を選択するために、eq(0)を使用することができます

$("input[name='delivery_option']:first").click(function() { 
    console.log('First was clicked'); 
}); 
+0

私は間違いなく、これは議論の余地があるもののIDは、優れていると思います質問された質問に対する正確な答え。現在最初の要素は、後で並べ替えられる傾向があります。 –

+2

さて、質問は「最初のものをクリックして、特定のものをクリックしてください」というものではありません:)将来の注文はどうなるでしょうか? – Dekel

+0

@DanFarrell、 )ありがとう! – Dekel

1

はただの終了前に、スクリプトの下に含ま"bod y "タグを含む。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$("#sel_address").click(function(){ 
    window.location = ""; 
}); 
</script> 
0
BeNdErRとして

Dekelは最初のラジオボタンを選択し:first pseudo-selectorを使用し、提案しました。

このページを再読み込みする場合は、this questionのようにlocation.reload()を使用してください。

$("input[type='radio']:first").click(function() { 
 
    location.reload(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="option sel_address"> 
 
    <input type="radio" value="sel_address" name="delivery_option" checked="checked" id="sel_address"> 
 
</label> 
 
<strong>selected address</strong> 
 

 
<label class="option your_school"> 
 
    <input type="radio" value="your_school" name="delivery_option" id="your_school"> 
 
</label> 
 
<strong>school</strong> 
 

 
<label class="option rhs_showroom"> 
 
    <input type="radio" value="showroom" name="delivery_option" id="showroom"> 
 
</label> 
 
<strong>Showroom</strong>

関連する問題