2017-01-01 121 views
0

我有3个单选按钮。我想刷新我的网页每次点击第1个单选按钮(即sel_address)。每当用户点击选定的地址页面应刷新。我不希望页面刷新点击其他2个单选按钮。我可以如何做到这一点?第一个单选按钮点击刷新页面

<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']").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

$("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

作为BeNdErRDekel建议的,使用:first pseudo-selector仅选择第一个单选按钮。

至于重新加载页面,请使用location.reload(),如this question上建议的那样。

$("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>