實現(xiàn)效果
?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Checkbox操作示例</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
// 全選
$("#selectAll").on("click", function(){
$("input[type='checkbox']").prop("checked", true);
});
// 全不選
$("#unselectAll").on("click", function(){
$("input[type='checkbox']").prop("checked", false);
});
// 反選
$("#invertSelect").on("click", function(){
$("input[type='checkbox']").each(function(){
$(this).prop("checked", !$(this).prop("checked"));
});
});
// 提交
$("#submit").on("click", function(){
var selectedValues = [];
$("input[type='checkbox']:checked").each(function(){
selectedValues.push($(this).val());
});
// 在這里可以將選中的值進行處理或發(fā)送到服務器
alert("選中的值：" + selectedValues);
});
});
</script>
</head>
<body>
<h1>Checkbox操作示例</h1>
<label><input type="checkbox" name="option" value="1">選項1</label><br>
<label><input type="checkbox" name="option" value="2">選項2</label><br>
<label><input type="checkbox" name="option" value="3">選項3</label><br>
<label><input type="checkbox" name="option" value="4">選項4</label><br>
<button id="selectAll">全選</button>
<button id="unselectAll">全不選</button>
<button id="invertSelect">反選</button>
<button id="submit">提交</button>
</body>
</html>在上述示例中，我們在<head>標簽中引入了jQuery庫，并在<script>標簽中編寫了全選、全不選、反選和提交的操作方法。在<body>標簽中，我們創(chuàng)建了一些checkbox選項，并使用<button>標簽來觸發(fā)相應的操作方法。當點擊不同的按鈕時，相應的JavaScript代碼會執(zhí)行，實現(xiàn)了checkbox的全選、全不選、反選和提交功能。文章來源：http://www.zghlxwxcb.cn/news/detail-745185.html
在提交按鈕的點擊事件中，我們通過$("input[type='checkbox']:checked")選擇所有被選中的checkbox，并將其值存入selectedValues數(shù)組中。你可以根據(jù)自己的需求來處理選中的值，例如將其發(fā)送給服務器或進行其他操作。文章來源地址http://www.zghlxwxcb.cn/news/detail-745185.html
到了這里，關于jquery之checkbox全選反選提交參數(shù)的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
![element UI table橫向樹結合checkbox進行多選，實現(xiàn)各個節(jié)點的[全選，半選，不選]狀態(tài)附帶模擬數(shù)據(jù)](https://imgs.yssmx.com/Uploads/2024/02/719574-1.png)
