JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li><label><input type="checkbox" value="" id="allcheck">全てチェック／解除</label></li>
  <li><label><input type="checkbox" class="onecheck" name="genre[]" value="1"/>ジャンル1</label></li>
  <li><label><input type="checkbox" class="onecheck" name="genre[]" value="2"/>ジャンル2</label></li>
  <li><label><input type="checkbox" class="onecheck" name="genre[]" value="3"/>ジャンル3</label></li>
  <li><label><input type="checkbox" class="onecheck" name="genre[]" value="4"/>ジャンル4</label></li>
  <li><label><input type="checkbox" class="onecheck" name="genre[]" value="5"/>ジャンル5</label></li>
</ul>
<ul>
 <li><a href="https://teratail.com/questions/29914">チェックボックスの一括選択/解除とCSSによる装飾を共存させたい(29914)｜teratail</a></li>
</ul>

CSS

input {
  display: none;
}

JavaScript

$(function(){
    //全選択チェックボックス用処理
    $("#allcheck").on("change", function(e){
        if($(this).prop("checked")){
            $(".onecheck").prop("checked", true);
        } else {
            $(".onecheck").prop("checked", false);
        }
    });

    //個別選択チェックボックス用処理
    $(".onecheck").on("change", function(e){
        $(".onecheck").each(function(index, element){
            if(!$(element).prop("checked")){
                $("#allcheck").prop("checked", false);
                return false;
            }
            $("#allcheck").prop("checked", true);
        });
    });
});