如何根據是否選擇最近的單選按鈕來顯示隱藏按鈕？

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