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

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

试试下面的代码

这里有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();
  });
})

click here to show jsFiddle demo

Answer 2

为什么没有清除按钮并隐藏它

CSS

.clearButton { display:none}

jQuery - 假设每个答案的容器都有“答案”类和
清除按钮有“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();
  });

如果已经检查了某些收音机，则在加载时显示清除按钮：

$("[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>