JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<input type="checkbox" id="check"/><br/>

    <input type="text" id="text1" value="10"/><br/>
<input type="text" id="text2" value="20"/><br/>
// how can i autofill "POINTS" in this textbox after checking the checkbox?
<input type="text" id="text3"/><br/>
    //how can i autofill "100" in this textbox after checking the checkbox?
<input type="text" id="text4" value="0"/><br/>
<input type="text" id="text5" value="0"/><br/>
<input type="text" id="text6" value="0"/><br/>
    // shows total of all values of above textboxes except text3<br/>
<input type="text" id="text7" value="30"/>
</body>

JavaScript

$(document).ready(function() {
    $("#check").change(function() {
        if ($(this).is(":checked")) $("#text4").val("100");
        else $("#text4").val("0");
        calculate();
    });

    $("#text1, #text2, #text5, #text6").keyup(function() {
        calculate();
    });
});

function calculate() {
    var a = $("#text1").val();
    var b = $("#text2").val();
    var c = $("#text5").val();
    var d = $("#text6").val();
    var total = parseInt(a) + parseInt(b) + parseInt(c) + parseInt(d);
    if ($("#check").is(":checked")) total += parseInt($("#text4").val());
    $("#text7").val(total);
}