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

手动调用click事件以显示编辑链接

demo

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

由于您使用单选按钮，我建议您将事件从单击更改为更改。 Click事件用于按钮，更改事件用于单选按钮复选框并选择

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

Demo

Answer 2

我更改了链接的类名，可以帮助编写一些consize代码。

将链接的类名更改为常用.edit而非.edit1, .edit2。
使用change事件而非点击，并确保在页面加载时触发它以显示已检查电台块中的编辑链接。

您可以稍微改变以获得所需的效果：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

触发点击首次开始：

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

选中单选按钮时显示“编辑”按钮

3 个答案: