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)取消选中其他然后点击的复选框。这是工作示例。

＆＃13;

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

＆＃13;

<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" />

＆＃13;

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

3 个答案: