复选框更改 innerHTML 并调用函数

Question

我有一组checkboxes:

<form class="form">
                <div class="btn-group btn-group-justified " data-toggle="buttons" name="chartSelect">
                    <label class="btn btn-info" id ="all">
                        <input name="all" type="checkbox" >Hide
                    </label>
                    <label class="btn btn-info">
                        <input name="total" id="total" type="checkbox">Total
                    </label>
                    <label class="btn btn-info">
                        <input name="max" id="max" type="checkbox">Max
                    </label>
                    <label class="btn btn-info">
                        <input name="mean" id="mean" type="checkbox">Mean
                    </label>
                    <label class="btn btn-info">
                        <input name="min" id="min" type="checkbox">Min
                    </label>
                    <label class="btn btn-info">
                        <input name="extrapo" id="extrapolation" type="radio">Extrapo
                    </label>
                </div>
            </form>

我正在尝试根据是否选中按钮调用两个函数，并更改标签上的文本。

我的 JS 尝试：

<script type="text/javascript">

$('[name=all]').change(function () {
    if ($(this).is(':checked')) {
        hideAll();
        document.getElementById("all").innerHTML = "Show";
    }
    else {
        showAll();
        document.getElementById("all").innerHTML = "Hide";
    }
});

</script>

我可以在选中和未选中时调用每个函数都没有问题，但是当我更改 innerHTML 时，选中按钮停止工作。

Answer 1

当前，您正在选择选择此 HTML 元素的标签：

<label class="btn btn-info" id ="all">
  <input name="all" type="checkbox" >Hide
</label>

当你设置 innerHTML 时，你就摆脱了输入。我会像这样拆分标签和输入：

<input name="all" type="checkbox">
<label class="btn btn-info" id="all">Hide</label>

Answer 2

您正在更改 innerHTML 的值，只留下文本。

解法： 将文本放在 span 元素中

<label class="btn btn-info" id="all">
  <input type="checkbox" name="all">
  <span>Hide</span>
</label>

然后在 JS 中做：

 $('input[name="all"]').on('change', function() {
  if ($(this).is(':checked')) {
    hideAll();
    $('#all span').text('Show');
  } else {
    showAll();
    $('#all span').text('Hide');
  }
});

复选框更改 innerHTML 并调用函数

Checkbox change innerHTML and call function

javascript

checkbox

innerhtml