JSFiddle - React, Tailwind, and code Playground

by backstabe

HTML

<table border="0" id="сhannels-table">
    <tbody>
        <tr>
            <td></td>
            <td><strong>Название пакета</strong>

            </td>
            <td><strong>Количество каналов</strong>

            </td>
            <td><strong>Цена в месяц/руб.</strong>

            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="base" value="185" checked disabled />
            </td>
            <td>Базовый</td>
            <td>66 каналов</td>
            <td>185</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="advanced" value="395" />
            </td>
            <td>Расширенный</td>
            <td>97 каналов</td>
            <td>395</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="child" value="45" />
            </td>
            <td>Детский</td>
            <td>9 каналов </td>
            <td>45</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="hd" value="245" />
            </td>
            <td>HD</td>
            <td>23 канала</td>
            <td>245</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="sport" value="45" />
            </td>
            <td>Спорт</td>
            <td>6 каналов</td>
            <td>45</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="music" value="45" />
            </td>
            <td>Музыкальный</td>
            <td>9 каналов </td>
            <td>45</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="footbol" value="155" />
            </td>
            <td>Наш футбол</td>
            <td>2 канала </td>
            <td>155</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="adult-channels" value="195" />
            </td>
            <td>Взрослое кино</td>
           ...

CSS

table#сhannels-table td {
    text-align:center;
}

JavaScript

(function($) {
$(function(){
jQuery(document).ready(function() {
    // inner variables
    var summa = parseInt($('#сhannels-table input[type="checkbox"][name="base"]').val());
    
    $('#сhannels-table input[type="checkbox"]').each(function () {
        $(this).click(function () {
            if ($(this).prop('checked')) {
                summa += parseInt($(this).val());
                $('#сhannels-table #price-tv').text(summa);
                $('#сhannels-table input[type="checkbox"][name="base"]').removeAttr("disabled");
            } else summa -= $(this).val();
            if (summa !== 0) {
                $('#сhannels-table #price-tv').text(summa);
            } else {
                $('#сhannels-table input[type="checkbox"][name="base"]').attr("disabled", "disabled");
                $('#сhannels-table input[type="checkbox"][name="base"]').attr("checked", "checked");
                summa = parseInt($('#сhannels-table input[type="checkbox"][name="base"]').val());
                $('#сhannels-table #price-tv').text(summa);
            }
        });
    });
    $('#сhannels-table #price-tv').text(summa);
});
});
})(jQuery);