Use Ajax WordPress Checkbox To Get Template - php

Question

I am trying to load a content template based on the checkbox but want to use AJAX to improve my coding structure but not sure how. I have no prior experience to AJAX so I would really appreciate your help.
HTML
<input type="checkbox" class="checkbox" id"content_one">
<input type="checkbox" class="checkbox" id="content_two">
PHP/Jquery
jQuery(document).ready( function() {
if ($('#content_one').is(':checked')) {
<?php get_template('content_one'); ?> //displays a post loop
}
if ($('#content_two').is(':checked')) {
<?php get_template('content_two'); ?> //displays a post loop
}
});

Answer 1

If you want to ajax you need to register the action in wordpress, it would be something like this.
add_action('wp_ajax_your_action_name', 'my_fallback_function')
add_action('wp_enqueue_scripts', 'my_script');
And you need to specify your function here, in the functions.php, it would be something like this
function my_fallback_function()
{
$param = $_GET['param'];
echo get_template($param);
wp_die();
}
function my_script()
{
wp_localize_script(
'ajaxUrl',
'ajaxObject',
array('ajax_url' => admin_url( 'admin-ajax.php' )
);
}
Then we need to specify the ajax call from the client side it would be something like this
$(document).ready(function() {
$("input[type='checkbox']").click((e) => {
const content = $(e.target).val();
const params = {
'action': 'your_action_name' // should be the same in the wp_ajax,
'param': content
};
$.ajax({
method: 'GET',
url: ajaxObject.ajax_url
data: params,
done(function(respond){
//append your respond here
})
})
})
})
<label for="checkbox1"><input type="checkbox" name="checkbox1" value="content_1"/>Content 1</label>
<label for="checkbox2"><input type="checkbox" name="checkbox2" value="content_2"/>Content 1</label>