在第一个单选按钮上，单击刷新页面

Question

我有 3 个单选按钮。我想在每次单击第一个单选按钮（即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{
            ..
        }
    }

Answer 1

在

"body"标签末尾之前包含以下脚本。

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

Answer 2

您可以使用

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伪类选择器：

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

Answer 3

正如BeNdErR和Dekel所建议的那样，使用:first伪选择器仅选择第一个单选按钮。

至于重新加载页面，请使用 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>