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

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的 - 每回答假设容器具有一流的 “答案”，并
清晰的按钮有类 “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(); 
    }); 
}) 

click here to show jsFiddle demo