在網頁開發中，我們常常需要用到checkbox，這種多選框可以允許用戶選擇多個選項。而有時候我們需要一鍵選擇全部選項或取消全部選項，這時候就需要用到javascript checkbox全選功能。接下來我將為大家介紹如何實現這個功能。

首先我們需要在html中設置好checkbox，可以設置它們的value值為不同的內容：

<input type="checkbox" name="fruit" value="apple">蘋果
<input type="checkbox" name="fruit" value="banana">香蕉
<input type="checkbox" name="fruit" value="orange">橙子

然后我們需要用javascript來實現全選功能，這里使用的是jQuery庫：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function(){
$("#checkAll").click(function(){
$("input[name='fruit']").prop("checked", $(this).prop("checked"));
});//點擊全選按鈕
});
</script><input type="checkbox" id="checkAll">全選

上面的代碼中，我們在html頁面中添加了一個全選按鈕，id為checkAll，然后我們使用了jQuery中的prop方法將所有name為fruit的checkbox都選中。在這里我們使用了click事件綁定全選按鈕，$(this).prop("checked")用來獲取全選按鈕的選中狀態，再通過prop方法選中或取消所有水果的checkbox。

如果我們需要添加取消全選功能，即點擊全選按鈕后如果選中狀態已經是true，那么再次點擊后應該變為false，代碼如下：

$(document).ready(function(){
$("#checkAll").click(function(){
var isChecked = $(this).prop("checked");
$("input[name='fruit']").prop("checked", isChecked);
if(isChecked==false){
$(this).attr("checked", false);
}//取消全選
});
});

上面的代碼中，在實現全選功能的基礎上添加了一個判斷，如果全選按鈕已經選中了，再次點擊就會取消全選。由于prop方法不能取消checkbox的選中狀態，所以我們使用了attr方法來改變全選按鈕的選中狀態。

此外，我們還可以實現反選功能，即如果有選項被選中，則取消選中狀態，如果沒選中，則選中它。代碼如下：

$(document).ready(function(){
$("#reverse").click(function(){
$("input[name='fruit']").each(function(){
$(this).prop("checked", !$(this).prop("checked"));
});
});//反選
});
<input type="checkbox" id="reverse">反選

上面的代碼中，我們首先使用了each方法遍歷所有的水果checkbox，然后使用prop方法將其改為與當前狀態相反的狀態，即選中的取消選中，未選中的則選中。

綜上所述，通過上述代碼，我們可以輕松實現javascript checkbox全選功能，而且還可以進行反選、取消全選的操作，使用戶體驗更加友好。