Show Edit button when radio button is checked

Question

I have to Input radio buttons namely

Radio1

Radio2

With 2 hidden edit anchor links, I have written JQuery code for showing and hiding Edit links when clicked on radio buttons its works superbly but when i refresh my page by default radio1 is checked during first time it will not show edit link when i click for second time it shows edit link.

By default if radio button is checked show edit link can somebody help me out in achieving it Thanks!

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();

manually call the click event to show the edit link

demo

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

Since you are using radio button I suggest that you change you event from click to change. Click event is used for button and change event is used for radio button checkbox and select

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

Demo

Answer 2

I have changed class name of the links which can help to write some consize code.

1. changed the class name of links to a common .edit instead of .edit1, .edit2 .
2. Use change event instead of click and make sure to trigger it on page load to show the edit link which is in the block of the checked radio.

You can change a little to get the desired effect:

 $('.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> 

Answer 3

Trigger click on first start :

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