Почему не меняются классы?

Question

[Web__Nikita03]

При нажатии на кнопку 1 должен меняться класс у 1 карточки и 2. По идее должен меняться цвет . Вот код

<section id="plan">
        <div class="container">
            <div class="row">
                <div class="col-4">
                    <h2>Choose your <br> perfect plan</h2>
                    <p class="you">You are</p>
                    <div class="button-b b2" id="button-10">
                        <input type="checkbox" class="checkbox" name="checkAddress" onclick="checkAddress()" id="checkAddress">
                        <div class="knobs">
                            <span>Company</span>
                        </div>
                        <div class="layer"></div>
                    </div>
                    <p class="plan-text text">Thus much I thought proper to tell you in relation to yourself, and to the trust I reposed in you.</p>
                    <p class="big-team text">Have a bigger team?</p>
                    <a href="#" class="big-team-a text">  Let‘s talk</a>
                </div>
                <div class="col-8">
                    <div class="card-global">
                        <div class="card card-active card_1">
                            <p class="card__name">Starter</p>
                            <span class="card__coast">Free</span>
                            <p class="card__text text">Build your schedule <br> every day</p>
                            <ul>
                                <li class="card__adw">Unlimeted events</li><br>
                                <li class="card__adw">Connect Dropbox & Evernote</li>
                            </ul>
                            <a href="#" class="button plan__butten protected-button-blue">
                                <p>Get started</p>
                            </a>
                        </div>
                        <div class="card card_2">
                            <p class="card__name">Pro</p>
                            <span class="card__coast">$4.99</span>
                            <p class="card__text text">Make your life <br> better</p>
                            <ul>
                                <li class="card__adw">Unlimeted events</li><br>
                                <li class="card__adw">Connect Dropbox & Evernote</li><br>
                                <li class="card__adw">Personal Assistant</li>
                            </ul>
                            <a href="#" class="button plan__butten protected-button-blue">
                                <p>Get started</p>
                             </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

$('.gamb-button').click(function() {
  $('.dop-nav').toggleClass('dop-nav-active');
  $('.gamb-menu').toggleClass('fadeInDown');
//   $('.menu-nav').toggleClass('menu-nav_active');
});
$(function(){
  $('.slider').slick({
      initialSlide: 1,
      prevArrow: '<img src="img/arrow-l.png" class="slider-arrow slider-arrow-l" alt="Left">',
      nextArrow: '<img src="img/arrow-r.png" class="slider-arrow slider-arrow-r" alt="Right">',
  });
}); 

function checkAddress()
{
  var chkBox = document.getElementById('checkAddress');
  if (chkBox.checked)
  {
    $('.card-1').toggleClass('card-active');
    $('.card-2').toggleClass('card-active');
  }
}

Answer 1

[Web__Nikita03]

Все работает , я не правильно назвал класс.
Для тех кто в будущем вот полноценный код js

function checkAddress()
{
  var chkBox = document.getElementById('checkAddress');
  if (chkBox.checked)
  {
    $('.card_1').toggleClass('card-active');
    $('.card_2').toggleClass('card-active');
  }
  else
  {
    $('.card_1').toggleClass('card-active');
    $('.card_2').toggleClass('card-active');
  }
}

Comments

[Ihor Bratukh]

Вместо:

var chkBox = document.getElementById('checkAddress');
if (chkBox.checked) {}

Можно так:
if ($('#checkAddress').prop('checked')) {}