JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog-confirm" title="Select Options">
    <button type="button" id="btnFoo">Foo</button>
<!--I need to call function in onclick event for checkbox below-->
<input type="checkbox" id="chkall" /> Check/Uncheck<br /><br />

<input type="checkbox" />Option 1<br />
<input type="checkbox" />Option 2<br />
<input type="checkbox" />Option 3<br />
<input type="checkbox" />Option 4<br />
<input type="checkbox" />Option 5<br />
<input type="checkbox" />Option 6<br />
<input type="checkbox" />Option 7
</div>

JavaScript

$(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:350,
      modal: true,
      buttons: {
        "Go": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
});

$(document).ready(function(){ 
    $("#btnFoo").click(function() {
        $('#chkall').click();
    });
    
    $('#chkall').click(function() {
        // this is the function I need to call
        var opt = $(this).parent().find('input[type=checkbox]').not($(this));
        opt.prop('checked', $(this).is(':checked') ? true : false);
    });     
});