Question

我有四个复选框。最初检查所有复选框。当我单击“无”复选框时，将取消选中其他复选框。

HTML

<label class='checkbox'><input type='checkbox' name='a' class="example"  value='1000' checked/>A</label>
<label class='checkbox'><input type='checkbox' name='b' class="example" value='1000' class='termcls'checked />B</label>
<label class='checkbox'><input type='checkbox' name='c' class="example" value='1000' checked/>C</label>
<label class='checkbox'><input type='checkbox' name='none' onchange="uncheckOthers()" value='0' class='termcls'/>(None)</label>

的jQuery

 function uncheckOthers()
 {
    $('input.example').not(this).prop('checked', false); 
 }

Answer 1

正如Tushar所述，this指的是window中的uncheckOthers，而不是None复选框元素。

如果要调用内联函数并期望在hadler中将当前元素设置为this，请将this作为参数传递。

试试这个：

 function uncheckOthers(elem) {
   $('input.example').not(elem).prop('checked', !elem.checked);
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label class='checkbox'>
  <input type='checkbox' name='a' class="example" value='1' checked/>A</label>
<label class='checkbox'>
  <input type='checkbox' name='b' class="example" value='2' class='termcls' checked />B</label>
<label class='checkbox'>
  <input type='checkbox' name='c' class="example" value='3' checked/>C</label>
<label class='checkbox'>
  <input type='checkbox' name='none' onchange="uncheckOthers(this)" value='0' class='termcls' />(None)</label>

Fiddle here

Answer 2

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

    $(document).ready(function () {


    });
    function uncheckOthers() {
        $('input.example').prop('checked', false);
    }
</script>
</head>

<body>
   <label class='checkbox'><input type='checkbox' name='a' class="example"  value='1' checked/>A</label>
<label class='checkbox'><input type='checkbox' name='b' class="example" value='2' class='termcls'checked />B</label>
<label class='checkbox'><input type='checkbox' name='c' class="example" value='3' checked/>C</label>
<label class='checkbox'><input type='checkbox' name='none' onchange="uncheckOthers()" value='0' class='termcls'/>(None)</label>
</body>

</html>

Answer 3

为了补充上面的答案，我做了一个功能，如果选中了其中一个复选框，则取消选中none复选框。

＆＃13;

 function uncheckOthers(elem) {
   $('input.example').not(elem).prop('checked', !elem.checked);
 }

 function uncheckNone(elem) {
   if(elem.checked)
   {
     $('input.termcls').prop('checked', false);
   }
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label class='checkbox'>
  <input type='checkbox' name='a' onchange="uncheckNone(this)" class="example" value='1' checked/>A</label>
<label class='checkbox'>
  <input type='checkbox' name='b' onchange="uncheckNone(this)" class="example" value='2' class='termcls' checked />B</label>
<label class='checkbox'>
  <input type='checkbox' name='c' onchange="uncheckNone(this)" class="example" value='3' checked/>C</label>
<label class='checkbox'>
  <input type='checkbox' name='none' onchange="uncheckOthers(this)" value='0' class='termcls' />(None)</label>

＆＃13;

如何在检查其他复选框时取消选中复选框？

3 个答案: