复选框更改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

您正在更改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');
  }
});

Answer 2

当前，您正在选择用于选择此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>