显示编辑按钮时，单选按钮被选中

Question

我必须输入单选按钮即

Radio1 

Radio2 

随着2个隐藏编辑锚链接，我写了jQuery代码对单选按钮其作品被点击时显示和隐藏编辑链接超级但是当我刷新我的网页默认情况下，第一次检查radio1时，它不会显示编辑链接，当我第二次点击它显示编辑链接。

默认情况下，如果单选按钮被选中显示编辑链接有人可以帮助我实现它谢谢！

https://jsfiddle.net/qx69o1bd/6/

的Html

<div> 
    <input id="radio-1" class="radio-custom rad_1" name="top_Ad" type="radio" checked> 
    <label for="radio-1" class="radio-custom-label" style='font-size:14px;'>Radio1</label> 
    <a style='display:none' href="#" class="edit1">Edit</a> 
</div> 

<div> 
    <input id="radio-2" class="radio-custom rad_2" name="top_Ad" type="radio"> 
    <label for="radio-2" class="radio-custom-label" style='font-size:14px;'>Radio2</label> 
    <a style='display:none' href="#" class="edit2">Edit</a> 
</div> 

JQUERY

$(".rad_1").click(function() { 
    $(".edit1").show(); 
    $(".edit2").hide(); 
}); 

$(".rad_2").click(function() { 
    $(".edit2").show(); 
    $(".edit1").hide(); 
}); 

Answer 1

$(".rad_1").click(); 

手动调用点击事件，显示编辑链接

demo

$(".rad_1").click(function() { 
    $(".edit1").show(); 
    $(".edit2").hide(); 
}); 
$(".rad_1").click(); 
$(".rad_2").click(function() { 
    $(".edit2").show(); 
    $(".edit1").hide(); 
}); 

由于您使用的单选按钮，我建议你从点击到的变化而变化，你的事件。点击事件被用于按钮，用于单选按钮，复选框改变事件，并选择在第一次启动

$(".rad_1").change(function() { 
    $(".edit1").show(); 
    $(".edit2").hide(); 
}); 
$(".rad_1").change(); 
$(".rad_2").change(function() { 
    $(".edit2").show(); 
    $(".edit1").hide(); 
}); 

Demo

Answer 2

触发点击：

$(".rad_1").click(function(){ 
    $(".edit1").show(); 
    $(".edit2").hide(); 
}).click(); //<---- here 

Answer 3

我已经改变了链接的类名这可以帮助写一些consize代码。

1. 将链接的类名更改为常见的.edit而不是.edit1, .edit2。
2. 使用change事件而不是点击，并确保在页面加载时触发它，以显示在选中的广播块中的编辑链接。

你可以改变一点点地得到想要的效果：

$('.radio-custom').change(function() { 
 
    $('.edit').hide(); // 2. hide all the .edit links 
 
    $(".radio-custom:checked").siblings('.edit').show(); // 3. only show the edit link which is the sibling of the checked radio 
 
}).change(); // <----1. trigger the change to show the hidden edit link;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input id="radio-1" class="radio-custom rad_1" name="top_Ad" type="radio" checked> 
 
    <label for="radio-1" class="radio-custom-label" style='font-size:14px;'>Radio1</label> 
 
    <a style='display:none' href="#" class="edit">Edit</a> 
 
</div> 
 

 
<div> 
 
    <input id="radio-2" class="radio-custom rad_2" name="top_Ad" type="radio"> 
 
    <label for="radio-2" class="radio-custom-label" style='font-size:14px;'>Radio2</label> 
 
    <a style='display:none' href="#" class="edit">Edit</a> 
 
</div>