Как отобразить таблицу, установив флажок с использованием чистого JavaScript?

Question

Мне нужно отобразить таблицу, когда флажок установлен, но он не работает. Ниже вы можете найти мой скрипт, флажок и таблицу

    <script>
    function checked() {
        var checkBox = document.getElementById("check");
        var concession = document.getElementById("hidden");
        if (checkBox.checked == true){
            concession.style.display = "block";
        } else {
            concession.style.display = "none";
        }
    }
</script>

<input type = "checkbox" name = "discount" id = "check" onclick = "checked()">

<table id = "hidden" class = "center" style = "display:none">
        <tr>
            <th>102-2 Taxable income is reduced by 400AZN</th>
            <th></th>
            <th><input type = "radio" name = "400"></th>
        </tr>
        <tr>
            <th>102-3 Taxable income is reduced by 200AZN</th>
            <th></th>
            <th><input type = "radio" name = "200"></th>
        </tr>
        <tr>
            <th>102-4 Taxable income is reduced by 100AZN</th>
            <th></th>
            <th><input type = "radio" name = "100"></th>
        </tr>
        <tr>
            <th>102-5 Taxable income is reduced by 50AZN</th>
            <th></th>
            <th><input type = "radio" name = 50"></th>
        </tr>
    </table>

Как я могу решить эту проблему?

Answer 1

когда вы используете встроенные обработчики, такие как onclick, вам нужно назначить функцию, поэтому onclick="checked" - правильный путь

. В качестве примечания о том, что назначение события через addEventListener() предпочтительнее

<input type="checkbox" name="discount" id="check">
<table id="hidden" class="center" style="display:none">
  ...
</table>

<script>
var concession = document.getElementById("hidden");
document.getElementById("check").addEventListener('click', function() {        
    concession.style.display = (this.checked)? "block" : "none";
});
</script>

---

Наконец, стоит отметить, что JS вообще не требуется, поскольку вы можете использовать только CSS для задач такого типа с заданной разметкой

#check + table { display: none }
#check:checked + table { display: block }

Answer 2

Возможно checked() ограничено, измените название вашей функции:

function changed() {
  var checked = document.getElementById("check").checked;
  var concession = document.getElementById("hidden");
  if (checked) {
    concession.style.display = "block";
  } else {
    concession.style.display = "none";
  }
}

<input type="checkbox" name="discount" id="check" onChange="changed()">

<table id="hidden" class="center" style="display:none">
  <tr>
    <th>102-2 Taxable income is reduced by 400AZN</th>
    <th></th>
    <th><input type="radio" name="400"></th>
  </tr>
  <tr>
    <th>102-3 Taxable income is reduced by 200AZN</th>
    <th></th>
    <th><input type="radio" name="200"></th>
  </tr>
  <tr>
    <th>102-4 Taxable income is reduced by 100AZN</th>
    <th></th>
    <th><input type="radio" name="100"></th>
  </tr>
  <tr>
    <th>102-5 Taxable income is reduced by 50AZN</th>
    <th></th>
    <th>
      <input type="radio" name="50"></th>
  </tr>
</table>

Answer 3

Вы получаете эту проблему, поскольку checked является зарезервированным именем. Попытайтесь переименовать имя функции во что-то еще, например OnCheckboxClicked, чтобы исправить эту проблему.

DEMO:

function OnCheckboxClicked() {
  var checkBox = document.getElementById("check");
  var concession = document.getElementById("hidden");
  if (checkBox.checked == true) {
    concession.style.display = "block";
  } else {
    concession.style.display = "none";
  }
}

<input type="checkbox" name="discount" id="check" onclick="OnCheckboxClicked()">

<table id="hidden" class="center" style="display:none">
  <tr>
    <th>102-2 Taxable income is reduced by 400AZN</th>
    <th></th>
    <th><input type="radio" name="400"></th>
  </tr>
  <tr>
    <th>102-3 Taxable income is reduced by 200AZN</th>
    <th></th>
    <th><input type="radio" name="200"></th>
  </tr>
  <tr>
    <th>102-4 Taxable income is reduced by 100AZN</th>
    <th></th>
    <th><input type="radio" name="100"></th>
  </tr>
  <tr>
    <th>102-5 Taxable income is reduced by 50AZN</th>
    <th></th>
    <th>
      <input type="radio" name=5 0 "></th>
        </tr>
    </table>

Answer 4

Вы должны добавить прослушиватель событий к флажку:

var checkbox = document.querySelector("#check");

checkbox.addEventListener( 'change', function() {
var concession = document.getElementById("hidden");
    if(this.checked) {
         concession.style.display='block';
    } else {
      concession.style.display='none';
    }
});