单击下拉菜单时将复选框设置为未选中

Question

如果我的下拉列表是使用jQuery选中的，我希望能够取消选中复选框。我觉得我可能就快到了，但我弄不明白为什么不起作用。例如，我点击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>
	$('.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>

​

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>

​