如果复选框一取消选中框二三四和五

Question

这是我的复选框代码：

<td><input type="checkbox" name="display-ad-one" <?php if ( get_option('display-ad-one') == 1 || get_option('display-ad-one') == 'on' ) echo 'checked="checked"'; ?> /></td>
<td><input type="checkbox" name="display-ad-two" <?php if ( get_option('display-ad-two') == 1 || get_option('display-ad-two') == 'on' ) echo 'checked="checked"'; ?> /></td>
<td><input type="checkbox" name="display-ad-three" <?php if ( get_option('display-ad-three') == 1 || get_option('display-ad-three') == 'on' ) echo 'checked="checked"'; ?> /></td>
<td><input type="checkbox" name="display-ad-four" <?php if ( get_option('display-ad-four') == 1 || get_option('display-ad-four') == 'on' ) echo 'checked="checked"'; ?> /></td>
<td><input type="checkbox" name="display-ad-five" <?php if ( get_option('display-ad-five') == 1 || get_option('display-ad-five') == 'on' ) echo 'checked="checked"'; ?> /></td>

那么我需要在这里取消选中示例：当我选中一个自动取消选中框二三四和五时？

谢谢。

Answer 1

据我了解这个问题。可以这样做。

$("input:checkbox").click(function(){
$('input:checkbox').not(this).prop('checked', '');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td><input type="checkbox" name="display-ad-one" /></td>
<td><input type="checkbox" name="display-ad-two" /></td>
<td><input type="checkbox" name="display-ad-three" checked /></td>
<td><input type="checkbox" name="display-ad-four" checked /></td>
<td><input type="checkbox" name="display-ad-five" checked /></td>

Answer 2

您不必以这种方式执行此操作。
我建议对name属性使用相同的值并更改value属性并使用radio按钮而不是checkbox。

<td><input type="radio" name="display-ad" value="one"/></td>
<td><input type="radio" name="display-ad" value="two"/></td>
<td><input type="radio" name="display-ad" value="three"/></td>
<td><input type="radio" name="display-ad" value="four"/></td>
<td><input type="radio" name="display-ad" value="five"/></td>

Answer 3

使用not()和prop('checked', false)取消选中其他然后单击的复选框。这是工作示例。

$('input:checkbox').on('click', function() {
if ($(this).prop('checked')) {
$('input:checkbox').not(this).prop('checked', false);
}  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="display-ad-one" checked />
<input type="checkbox" name="display-ad-two" />
<input type="checkbox" name="display-ad-three"  />
<input type="checkbox" name="display-ad-four" />
<input type="checkbox" name="display-ad-five" />