if else check based on what is checked

I have to display a product code based on what the user selects so on change not on click. I have two radio button which are always selected, the first with 4 options and the second with 3, for the basic product.

The first one is called lunghezza and the second lampeggiante.

Plus 3 checkbox that are extras.

If the checkbox#fanale is selected also #faro and #back will, if #back is selected also #faro but not #fanale and if #faro is selected will be the only one.

I also need to change stile of 4 number next to this based on what again is selected, if no checkbox are selected just the first one will be active, if checkbox 2(fanale) is checked all 4 numbers will be active, if checkbox 3(back) is checked number 3 and 4 will be active and if checkbox4 (faro) is checked just the number 4 will be Below my code: HTML

                    <div class="options">
                        <input type="checkbox" id="fanale" value="fanale">
                        <label for="fanale">
                            <i class="checked material-icons">check_box</i>
                            <i class="unchecked material-icons">check_box_outline_blank</i>
                            fanale <br> posteriore
                        </label> 
                    </div>
                   <div class="options">
                        <input type="checkbox" id="back" value="back">
                        <label for="back">
                            <i class="checked material-icons">check_box</i>
                            <i class="unchecked material-icons">check_box_outline_blank</i>
                            back-up <br> 97 db
                        </label> 
                    </div>
                    <div class="options">
                        <input type="checkbox" id="faro" value="faro">
                        <label for="faro">
                            <i class="checked material-icons">check_box</i>
                            <i class="unchecked material-icons">check_box_outline_blank</i>
                            faro da lavoro <br> diam. 130 led
                        </label> 
                    </div>

JS

var lunghezza = $("input[name='lunghezza']:checked").val();
var lampeggiante = $("input[name='lampeggiante']:checked").val();
var faroChecked = $("#faro").is(':checked');
var backChecked = $("#back").is(':checked');
var fanaleChecked = $("#fanale").is(':checked');
var code = $("#easyBarCode");

$('input:checkbox').change(function() {
    if ($(this).is(':checked')) {
        calcoloCodice();
        console.log($(this).val());
    }
})

function calcoloCodice() {
console.log("ghjk")
if(lunghezza == 700 && lampeggiante && fanaleChecked || lunghezza == 1000 && lampeggiante && fanaleChecked || lunghezza == 1200 && lampeggiante && fanaleChecked || lunghezza == 1500 && lampeggiante && fanaleChecked) {
    code.html("EB " + lampeggiante + " - FL/BK/FP");
    console.log("1")
}   else if (lunghezza == 700 && lampeggiante && backChecked || lunghezza == 1000 && lampeggiante && backChecked || lunghezza == 1200 && lampeggiante && backChecked || lunghezza == 1500 && lampeggiante && backChecked) {
        code.html("EB " + lampeggiante + " - FL/BK");
        console.log("2")
}   else if (lunghezza == 700 && lampeggiante && faroChecked || lunghezza == 1000 && lampeggiante && faroChecked || lunghezza == 1200 && lampeggiante && faroChecked || lunghezza == 1500 && lampeggiante && faroChecked) {
        code.html("EB " + lampeggiante + " - FL");
        console.log("3")
}   else if (lunghezza == 700 && lampeggiante || lunghezza == 1000 && lampeggiante|| lunghezza == 1200 && lampeggiante || lunghezza == 1500 && lampeggiante) {
        code.html("EB " + lampeggiante);
        console.log("4")
}   else {}

}