如何根据是否选择了最接近的单选按钮来显示隐藏按钮？

Question

假设我有两个测验问题。每个问题都有用于选择答案的单选按钮和一个用于清除答案的清除答案按钮。 仅当在相应问题栏中选择/取消选择答案时，隐藏/隐藏按钮才会隐藏/显示。

如何找到选中/取消选中的单选按钮是否在其最近的问题栏中，并相应地显示/隐藏清除按钮？

并且，这是我当前正在使用的JS代码

jQuery(function($) {

if ($("input[type]").is(":radio")) {
    $(".answer").append("<button type='button' name='clear' >Clear</button>");
}

if ($("input[type=radio]:checked").length > 0) {
    $('button[name=clear]').show();
}
else{
    $('button[name=clear]').hide();
    }


$("input[type=radio]").on('click', function() {
    $nearest=  $(this).closest('.answer').find('button[name=clear]');
    $nearest.show();
});

$('button[name=clear]').on('click', function() {
    $(this).closest('.answer').find(':radio').prop('checked', false);
    $(this).hide();
});

if ($('.content').parent().hasClass("deferredfeedback")) {
    if ($('.answer .r0 input').prop('disabled')) {
        $("button[name=clear]").remove();
    }
} else {
    if (!($('div.im-controls').length)) {
        $("button[name=clear]").remove();
    }
}

});

在某个地方，我错过了一些我无法找到的东西，有人可以指导我吗？

Answer 1

为什么不在那里有清除按钮并将其隐藏

的CSS

.clearButton { display:none}

jQuery-假设每个答案的容器都具有“ answer”类，并且
清除按钮具有“ clearButton”类：

$(function() {
  $(".answer").on("click","input[type=radio]",function() {
    $(this).closest(".answer").find(".clearButton").show();
  });
});

或兄弟姐妹：

$(function() {
  $(".answer").on("click","input[type=radio]",function() {
    $(this).siblings(".clearButton").show();
  });
});

明确地说，您可以使用

  $(".answer").on("click",".clearButton",function() {
    $(this).siblings("input[type=radio]").prop("checked",false);
    $(this).hide();
  });

如果已经检查了某些无线电，要显示清除按钮onload：

$("[type=radio]:checked").trigger("click")

 $(function() { $(".answer").on("click", "input[type=radio]", function() { $(this).closest(".answer").find(".clearButton").show(); }); $(".answer").on("click", ".clearButton", function() { $(this).siblings("input[type=radio]").prop("checked", false); $(this).hide(); }); $("[type=radio]:checked").trigger("click") }); 

 .clearButton { display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="answer"> <label><input type="radio" name="answer1" value="1">Answer 1</label> <label><input type="radio" name="answer1" value="2">Answer 2</label> <label><input type="radio" name="answer1" value="3">Answer 3</label> <button type="button" class="clearButton">Clear</button> </div> <hr/> <div class="answer"> <label><input type="radio" name="answer2" value="1">Answer 1</label> <label><input type="radio" name="answer2" value="2" checked>Answer 2</label> <label><input type="radio" name="answer2" value="3">Answer 3</label> <button type="button" class="clearButton">Clear</button> </div> 

Answer 2

试试下面的代码

Js代码在这里

jQuery(function($) {
  $("button").hide();
  $("input[type='radio']:checked").each(function(e){
        $(this).closest('.answers').find("button").show();
  });
  $("body").on("change","input[type='radio']" ,function(){
    $(this).closest('.answers').find("button").show();
  });

  $("body").on("click","button" ,function(){
    $(this).closest('.answers').find("input[type='radio']:checked").prop("checked",false);
    $(this).hide();
  });
})

单击此处显示jsFiddle演示