設置一個複選框，當點擊下拉框時取消選中

Question

我希望能夠取消選中複選框，如果我已經使用jQuery選擇了我的下拉菜單。我覺得我可能幾乎在那裏，但不知道爲什麼它不工作。例如，我點擊MR，然後我改爲醫生 - MR選擇。

<script> 
$('.multiple-choice').click(function(){ 
$('input').prop('checked', false); 
}); 
</script> 

<fieldset class="title-box"> 

<span><input type="radio" name="title" value="Mr" onclick="titlehandler(this)" id="titlemr" th:field="*{title}" /> <label for="titlemr" id="mr-label">Mr</label></span> 
<span><input type="radio" name="title" value="Mrs" onclick="titlehandler(this)" id="titlemrs" th:field="*{title}" /> <label for="titlemrs" id="mrs-label">Mrs</label></span> 
<span><input type="radio" name="title" value="Miss" onclick="titlehandler(this)" id="titlemiss" th:field="*{title}" /> <label for="titlemiss" id="miss-label">Miss</label></span> 
<span><input type="radio" name="title" value="Ms" onclick="titlehandler(this)" id="titlems" th:field="*{title}" /> <label for="titlems" id="ms-label">Ms</label></span> 

    <span><label for="dropdown">Other</label> 
    <select name="dropdown" id="dropdown" class="multiple-choice"> 


<option value="Dr" name="othertitle1" id="othertitle1">Dr</option> 
<option value="Rev">Rev</option> 
<option value="Sir">Sir</option> 
<option value="Sist">Sist</option></select> 
</fieldset> 

<script> 
 
\t $('.multiple-choice').click(function(){ 
 
    $('input').prop('checked', false); 
 
    }); 
 
    </script>

<fieldset class="title-box"> 
 
\t \t \t \t \t \t \t 
 
\t <span><input type="radio" name="title" value="Mr" onclick="titlehandler(this)" id="titlemr" th:field="*{title}" /> <label for="titlemr" id="mr-label">Mr</label></span> 
 
\t <span><input type="radio" name="title" value="Mrs" onclick="titlehandler(this)" id="titlemrs" th:field="*{title}" /> <label for="titlemrs" id="mrs-label">Mrs</label></span> 
 
\t <span><input type="radio" name="title" value="Miss" onclick="titlehandler(this)" id="titlemiss" th:field="*{title}" /> <label for="titlemiss" id="miss-label">Miss</label></span> 
 
\t <span><input type="radio" name="title" value="Ms" onclick="titlehandler(this)" id="titlems" th:field="*{title}" /> <label for="titlems" id="ms-label">Ms</label></span> 
 

 
\t \t <span><label for="dropdown">Other</label> 
 
\t \t <select name="dropdown" id="dropdown" class="multiple-choice"> 
 
          
 

 
    <option value="Dr" name="othertitle1" id="othertitle1">Dr</option> 
 
    <option value="Rev">Rev</option> 
 
    <option value="Sir">Sir</option> 
 
    <option value="Sist">Sist</option></select> 
 
    </fieldset>

Answer 1

試試這個代碼：

<script> 
$('.multiple-choice').click(function(){ 
    $("input[type='radio'").each(function() { 
     $(this).prop('checked', false); 
    }); 
}); 
</script> 

Answer 2

無論是在你的文件底部把這部分或一個$(document).ready()回調包裹。

<script> 
$('.multiple-choice').click(function(){ 
$('input').prop('checked', false); 
}); 
</script> 

Answer 3

我刪除onclick="titlehandler(this)"，它似乎是做工精細：

$('.multiple-choice').click(function() { 
 
    $('input').prop('checked', false); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset class="title-box"> 
 

 
    <span><input type="radio" name="title" value="Mr" id="titlemr" th:field="*{title}" /> <label for="titlemr" id="mr-label">Mr</label></span> 
 
    <span><input type="radio" name="title" value="Mrs" id="titlemrs" th:field="*{title}" /> <label for="titlemrs" id="mrs-label">Mrs</label></span> 
 
    <span><input type="radio" name="title" value="Miss" id="titlemiss" th:field="*{title}" /> <label for="titlemiss" id="miss-label">Miss</label></span> 
 
    <span><input type="radio" name="title" value="Ms" id="titlems" th:field="*{title}" /> <label for="titlems" id="ms-label">Ms</label></span> 
 

 
    <span><label for="dropdown">Other</label> 
 
    <select name="dropdown" id="dropdown" class="multiple-choice"> 
 

 

 
<option value="Dr" name="othertitle1" id="othertitle1">Dr</option> 
 
<option value="Rev">Rev</option> 
 
<option value="Sir">Sir</option> 
 
<option value="Sist">Sist</option></select> 
 
</fieldset>