javascript 选中“任意”复选框会导致所有单个复选框无响应

acruukt9  于 2023-05-16  发布在  Java
关注(0)|答案(3)|浏览(283)

我的网页上有以下复选框:

<input type="checkbox" onclick="ValueAnyDisable()" id="Chk0" name="Test1" value="1"  />
Any  <br />
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk1" name="Test1" value="12"  />
BMW <br />
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk2" name="Test1" value="11"  />
FIAT <br />
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk3" name="Test1" value="13"  />
Tesla  <br />
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk4" name="Test1" value="54"  />
Toyota <br />
<input type="checkbox" onclick="ValueAnyDisable()" id="Chk5" name="Test1" value="44"  />
Ford <br />

如果有人选中“任何”复选框,那么我希望所有其他复选框也被选中。如果有人取消选中“任何”复选框,那么我希望其他复选框被取消选中。这就是我为了实现这一点而写的:

function ValueAnyDisable()
        {
            const otherCheckboxes = $('[id^=Chk]:not(#Chk0)');
            if ($('#Chk0').is(':checked'))
                otherCheckboxes.prop('checked', true);
            else
                otherCheckboxes.prop('checked', false);

        }

上面的代码在选中“Any”时选中所有复选框,在未选中“Any”时取消选中所有复选框,但是在取消选中“Any”复选框之后,我不能单独选中任何复选框。所有其他复选框将无响应。我在一个循环中创建这些复选框,值来自数据库,所以我只能为所有复选框放置一个onclick事件。上面的复选框是呈现的HTML。

lyr7nygr

lyr7nygr1#

在函数ValueAnyDisable中,您可以根据Chk0是否选中来设置所有复选框的选中或取消选中。其他复选框没有单独的“生命”。通过调用所有其他复选框的相同函数onclick,在某种程度上,您已经将所有其他复选框的值限制为Chk0
由于您只需要侦听Chk0的检查以获得此特定功能,因此您可以仅对Chk0运行click函数,并根据Chk0的值设置其他复选框的值true或false。由于这个函数只在Chk0上调用,其他复选框不会被限制其单独的检查操作。

$("#Chk0").click(function () {
        $('[id^=Chk]:not(#Chk0)').prop('checked', $(this).prop('checked')).prop('disabled', $(this).prop('checked'));
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="Chk0" name="Test1" value="1"  />
Any  <br />
<input type="checkbox" id="Chk1" name="Test1" value="12"  />
BMW <br />
<input type="checkbox" id="Chk2" name="Test1" value="11"  />
FIAT <br />
<input type="checkbox" id="Chk3" name="Test1" value="13"  />
Tesla  <br />
<input type="checkbox" id="Chk4" name="Test1" value="54"  />
Toyota <br />
<input type="checkbox" id="Chk5" name="Test1" value="44"  />
Ford <br />
7y4bm7vi

7y4bm7vi2#

通过添加<label>标记改进了您的html。并为复选框更改事件创建了一个最小函数:

$(document).on('change', '[name="Test1"]', function() {
  const anyCheckbox = $('#Chk0');
  const checkboxes = $('[name="Test1"]').not(anyCheckbox);
  if ( $(this).is(anyCheckbox) ) {
    if ( $(this).prop('checked') ) {
      checkboxes.prop('checked', true);
    } else {
      checkboxes.prop('checked', false);
    }
  } else {
    if ( $('[name="Test1"]:checked').not(anyCheckbox).length === checkboxes.length ) {
      anyCheckbox.prop('checked', true);
    } else {
      anyCheckbox.prop('checked', false);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="Chk0" name="Test1" value="1">
<label for="Chk0">Any</label>
<br>
<input type="checkbox" id="Chk1" name="Test1" value="12">
<label for="Chk1">BMW</label>
<br>
<input type="checkbox" id="Chk2" name="Test1" value="11">
<label for="">FIAT</label>
<br>
<input type="checkbox" id="Chk3" name="Test1" value="13">
<label for="Chk2">Tesla</label>
<br>
<input type="checkbox" id="Chk4" name="Test1" value="54">
<label for="Chk4">Toyota</label>
<br>
<input type="checkbox" id="Chk5" name="Test1" value="44">
<label for="Chk5">Ford</label>
edqdpe6u

edqdpe6u3#

首先,你必须从另一个输入框中删除onclick事件,这样你的HTML就会像这样:

<input type="checkbox" onclick="ValueAnyDisable()" id="Chk0" name="Test1" value="1" />Any  <br/>
<input type="checkbox" id="Chk1" name="Test1" value="12"  />BMW <br/>
<input type="checkbox" id="Chk2" name="Test1" value="11"  />FIAT <br/>
<input type="checkbox" id="Chk3" name="Test1" value="13"  />Tesla <br/>
<input type="checkbox" id="Chk4" name="Test1" value="54"  />Toyota <br/>
<input type="checkbox" id="Chk5" name="Test1" value="44"  />Ford <br/>

你的功能应该是:

function ValueAnyDisable()
    {   
        if ($('#Chk0').is(':checked')) {
                $('input').prop('checked', true);
            } else {
                $('input').prop('checked', false);
            }
    }

**您也可以使用ID选择器来完成。**您可以删除onclik =“ValueAnyDisable()”:

<input type="checkbox" id="Chk0" name="Test1" value="1" />Any  <br/>
<input type="checkbox" id="Chk1" name="Test1" value="12"  />BMW <br/>
<input type="checkbox" id="Chk2" name="Test1" value="11"  />FIAT <br/>
<input type="checkbox" id="Chk3" name="Test1" value="13"  />Tesla <br/>
<input type="checkbox" id="Chk4" name="Test1" value="54"  />Toyota <br/>
<input type="checkbox" id="Chk5" name="Test1" value="44"  />Ford <br/>

您的jQuery事件更改为:

$(document).ready(function(){
    $('#Chk0').click(function() {
        if ($(this).is(':checked')) {
            $('input').prop('checked', true);
        } else {
            $('input').prop('checked', false);
        }
    });  
});

相关问题