Как при выборе чекбокса у родительской ссылки менять надпись

354

21 октября 2017, 17:28

Есть список с чекбоксами. Как мне менять текст в ссылке, при активации этого чекбокса, на текст с кол-вом активных чекбоксов?

Верстка:

var countChecked = function() { 
  var n = $('input:checked').length; 
  if (n != 0) 
    $('#price').html("выбрано " + n + '<span class="caret">').addClass("activedrop"); 
 
}; 
countChecked(); 
 
$('input[type=checkbox]').on('click', countChecked);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<nav> 
  <div class="col-md-11"> 
    <ul id="ddmenu"> 
      <li><a href="#" class="open">Тест<span class="caret"></span></a> 
        <div class="hover"> 
          <div class="scroll"> 
            <label> 
                      <input class="checkbox" type="checkbox" name="test[]"  value="1"> 
                      <span class="checkbox-custom"></span> 
                      <span class="label">Тест</span> 
                    </label> 
            <label> 
                      <input class="checkbox" type="checkbox" name="test[]"  value="1"> 
                      <span class="checkbox-custom"></span> 
                      <span class="label">Тест</span> 
                    </label> 
            <label> 
                      <input class="checkbox" type="checkbox" name="test[]"  value="1"> 
                      <span class="checkbox-custom"></span> 
                      <span class="label">Тест</span> 
                    </label> 
          </div> 
        </div> 
      </li> 
    </ul> 
  </div> 
</nav>

Неактивный чекбокс:

Активный:

Так же при повторном клике, как снимаем чекбокс, остается изменения у ссылки с кол-вом:

Answer 1

var countChecked = function() { 
  var n = $('input:checked').length; 
  if (n > 0){ 
    $('#price') 
      .html("Выбрано " + n + '<span class="caret">') 
      .addClass("activedrop"); 
  } else { 
    $('#price') 
      .html("Тест") 
      .removeClass("activedrop"); 
  } 
}; 
 
$('input[type=checkbox]').on('click', countChecked);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<nav> 
  <div class="col-md-11"> 
    <ul id="ddmenu"> 
      <li><a href="#" class="open" id="price">Тест<span class="caret"></span></a> 
        <div class="hover"> 
          <div class="scroll"> 
            <label> 
                      <input class="checkbox" type="checkbox" name="test[]"  value="1"> 
                      <span class="checkbox-custom"></span> 
                      <span class="label">Тест</span> 
                    </label> 
            <label> 
                      <input class="checkbox" type="checkbox" name="test[]"  value="1"> 
                      <span class="checkbox-custom"></span> 
                      <span class="label">Тест</span> 
                    </label> 
            <label> 
                      <input class="checkbox" type="checkbox" name="test[]"  value="1"> 
                      <span class="checkbox-custom"></span> 
                      <span class="label">Тест</span> 
                    </label> 
          </div> 
        </div> 
      </li> 
    </ul> 
  </div> 
</nav>

Answer 2

let lis = Array.from ( document.querySelectorAll( 'li' ) ); 
     
lis.forEach( ( li ) => { 
  let link = Array.from( li.children ).find( ( el ) => { 
    if ( el.tagName === 'A' && el.className === 'open' ) { 
      return el; 
    } 
    return false; 
  } ); 
 
  li.counter = 0; 
  li.addEventListener( 'change', ( e ) => { 
    link.innerHTML = `Выбрано ${ e.srcElement.checked ? 
                                   ++li.counter : 
                                   --li.counter }`;     
  } ); 
} );

<nav> 
  <div class="col-md-11"> 
    <ul id="ddmenu"> 
      <li><a href="#" class="open">Тест<span class="caret"></span></a> 
        <div class="hover"> 
          <div class="scroll"> 
            <label> 
                  <input class="checkbox" type="checkbox" name="test[]"  value="1"> 
                  <span class="checkbox-custom"></span> 
                  <span class="label">Тест</span> 
                </label> 
            <label> 
                  <input class="checkbox" type="checkbox" name="test[]"  value="1"> 
                  <span class="checkbox-custom"></span> 
                  <span class="label">Тест</span> 
                </label> 
            <label> 
                  <input class="checkbox" type="checkbox" name="test[]"  value="1"> 
                  <span class="checkbox-custom"></span> 
                  <span class="label">Тест</span> 
                </label> 
          </div> 
        </div> 
      </li> 
<li><a href="#" class="open">Тест<span class="caret"></span></a> 
        <div class="hover"> 
          <div class="scroll"> 
            <label> 
                  <input class="checkbox" type="checkbox" name="test[]"  value="1"> 
                  <span class="checkbox-custom"></span> 
                  <span class="label">Тест</span> 
                </label> 
            <label> 
                  <input class="checkbox" type="checkbox" name="test[]"  value="1"> 
                  <span class="checkbox-custom"></span> 
                  <span class="label">Тест</span> 
                </label> 
            <label> 
                  <input class="checkbox" type="checkbox" name="test[]"  value="1"> 
                  <span class="checkbox-custom"></span> 
                  <span class="label">Тест</span> 
                </label> 
          </div> 
        </div> 
      </li> 
    </ul> 
  </div> 
</nav>