Отслеживание выбранных элементов и отображение на различных HTML-JavaScript - PullRequest
Новая
       38

Отслеживание выбранных элементов и отображение на различных HTML-JavaScript

0 голосов
/ 11 июля 2019

У меня есть набор прямоугольников, у которых есть флажок, я хочу, чтобы пользователь мог выбрать столько же, а затем отобразить «счетчик» на другом прямоугольнике.Каково лучшее решение для этого?

Этот список функций привязан к набору div, в котором содержится 1 значение. 

let count = document.getElementById("count").innerHTML;
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  if (checkBox.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}
function myFunction2() {
  var checkBox2 = document.getElementById("myCheck2");
  if (checkBox2.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}
function myFunction3() {
  var checkBox3 = document.getElementById("myCheck3");
  if (checkBox3.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}
function myFunction4() {
  var checkBox4 = document.getElementById("myCheck4");
  if (checkBox4.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}
function myFunction5() {
  var checkBox5 = document.getElementById("myCheck5");
  if (checkBox5.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}
function myFunction6() {
  var checkBox6 = document.getElementById("myCheck6");
  if (checkBox6.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}
function myFunction7() {
  var checkBox7 = document.getElementById("myCheck7");
  if (checkBox7.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}
function myFunction8() {
  var checkBox8 = document.getElementById("myCheck8");
  if (checkBox8.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}
function myFunction9() {
  var checkBox9 = document.getElementById("myCheck9");
  if (checkBox9.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}
function myFunction10() {
  var checkBox10 = document.getElementById("myCheck10");
  if (checkBox10.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}
function myFunction11() {
  var checkBox11 = document.getElementById("myCheck11");
  if (checkBox11.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}
function myFunction12() {
  var checkBox12 = document.getElementById("myCheck12");
  if (checkBox12.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}
function myFunction13() {
  var checkBox13 = document.getElementById("myCheck13");
  if (checkBox13.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}
function myFunction14() {
  var checkBox14 = document.getElementById("myCheck14");
  if (checkBox14.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}
function myFunction15() {
  var checkBox15 = document.getElementById("myCheck15");
  if (checkBox15.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}
function myFunction16() {
  var checkBox16 = document.getElementById("myCheck16");
  if (checkBox16.checked == true){
    count++;
    document.getElementById('count').innerHTML = count;
  } else {
     count--;
     document.getElementById('count').innerHTML = count;
  }
}

Это прямоугольники со значением "1" 

          <div class="d-inline-flex flex-wrap row justify-content-center">
              <div class="caja" style="background-color: white;">
                  <p>Carrera 1</p>
                <span class="checkbox-carreras" style="font-size:.8rem;"> Seleccionar <input type="checkbox" radio="radio" id="myCheck" onclick="myFunction13()"></span>
              </div>

              <div class="caja" style="background-color: white;">
                  <p>Carrera 1</p>
                <span class="checkbox-carreras" style="font-size:.8rem;"> Seleccionar <input type="checkbox" radio="radio" id="myCheck" onclick="myFunction14()"></span>
              </div>

              <div class="caja" style="background-color: white;">
                  <p>Carrera 1</p>
                <span class="checkbox-carreras" style="font-size:.8rem;"> Seleccionar <input type="checkbox" radio="radio"  id="myCheck" onclick="myFunction15()"></span>
              </div>

              <div class="caja" style="background-color: white;">
                  <p>Carrera 1</p>
                <span class="checkbox-carreras" style="font-size:.8rem;"> Seleccionar <input type="checkbox" radio="radio"  id="myCheck" onclick="myFunction16()"></span>
              </div>
            </div>

И эти «другие» прямоугольники, прямоугольники, делители, в конечном итоге будут содержать общую сумму, вывод. 

<div class="d-flex align-content-center flex-wrap container-img-intereses">
                <a href="negocios-especificos.html"><br>
                  <img src="/btn-mkt.png" width="350px"/></a>
                  <button type="button" class="carreras-seleccionadas" id="count"> 0 </button>
                  <a href="./mercadotecnia.html" onclick="centeredPopup(this.href,'myWindow','700','360','yes');return false">
                    <button type="button" class="btn btn-primary btn-carreras"> Info </button> </a>
              </div>

Для дальнейшей информации я решил проиллюстрировать ее еще больше counter-01.png

...