gpt4 book ai didi

javascript - 如何使用 jQuery 通过一个按钮选择/取消选择所有复选框?

转载 作者:行者123 更新时间:2023-11-28 12:20:52 24 4
gpt4 key购买 nike

我想使用一个按钮单击来在选择特定 div/表中的所有复选框和取消选择所有复选框之间进行切换。此外,我想要链接/或按钮将名称更改为“全选”和“取消全选”。我已经看到使用复选框或两次不同的按钮单击的类似答案,但没有任何内容。我会使用 jquery 使其保持简单和简短。

HTML

<body>
<div id="main">
<div id="first">
<h1>Check & Uncheck All Options</h1>
<p>Check & Uncheck All Options by Button</p>
<input id="checkAll" type="button" value="Check/Uncheck All ">
<div class="button">
<input class="first" id="Item 1" name="option1" type="checkbox">
<label class="label1" for="Item 1">Item 1</label>
<input class="first" id="Item 2" name="option1" type="checkbox">
<label class="label1" for="Item 2">Item 2</label>
<input class="first" id="Item 3" name="option1" type="checkbox">
<label class="label1" for="Item 3">Item 3</label>
<input class="first" id="Item 4" name="option1" type="checkbox">
<label class="label1" for="Item 4">Item 4</label>
</div>
</body>

最佳答案

像这样怎么样:

$(function() {

$(document).on('click', '#checkAll', function() {

if ($(this).val() == 'Check All') {
$('.button input').prop('checked', true);
$(this).val('Uncheck All');
} else {
$('.button input').prop('checked', false);
$(this).val('Check All');
}
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div id="main">
<div id="first">
<h1>Check & Uncheck All Options</h1>
<p>Check & Uncheck All Options by Button</p>
<input id="checkAll" type="button" value="Check All">
<div class="button">
<input class="first" id="Item 1" name="option1" type="checkbox">
<label class="label1" for="Item 1">Item 1</label>
<input class="first" id="Item 2" name="option1" type="checkbox">
<label class="label1" for="Item 2">Item 2</label>
<input class="first" id="Item 3" name="option1" type="checkbox">
<label class="label1" for="Item 3">Item 3</label>
<input class="first" id="Item 4" name="option1" type="checkbox">
<label class="label1" for="Item 4">Item 4</label>
</div>
</body>

关于javascript - 如何使用 jQuery 通过一个按钮选择/取消选择所有复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38959933/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com