You can use something like this:
$(':checkbox').on('change', function() {
if ($(this).is(':checked')) {
$(".content").addClass("highlight");
} else {
$(".content").removeClass("highlight");
}
});
And in the CSS you need to have:
.highlight {background: #99f;}
Snippet
$(function () {
text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt repellat sint eligendi adipisci consequuntur perspiciatis voluptate sunt id, unde aspernatur dolor impedit iure quaerat possimus nihil laboriosam, neque, accusamus ad.";
$(".content").text(text);
$(':checkbox').on('change', function() {
if ($(this).is(':checked')) {
$(".content").addClass("highlight");
$(".content").html(text.replace(/lo/gi, '<span>lo</span>'));
} else {
$(".content").removeClass("highlight");
}
});
});
.check + input {display: none;}
.check:checked + input {display: inline-block;}
.highlight span {background: #ccf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" class="check" />
<input type="text" placeholder="Type your terms..." class="term" />
<div class="content"></div>
Maybe something like the above.
solved Search textbox using checkbox in Javascript