JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<input class="r_check" type="checkbox" id="r1" name="rating" value="1"><label for="r1"></label>
<input class="r_check" type="checkbox" id="r2" name="rating" value="2"><label for="r2"></label>
<input class="r_check" type="checkbox" id="r3" name="rating" value="3"><label for="r3"></label>

<p class="text" id="the_text"></p>

JavaScript

$(document).ready(function() {
    var text = $("#the_text");
    var none = function() { text.html("None");} ;
    $("#r1").hover(function() {
        text.html("Low");
    },none);
    $("#r2").hover(function() {
        text.html("Medium");
    },none);
    $("#r3").hover(function() {
        text.html("High");
    },none);
    none(); 
});