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>

复选框更改innerHTML和调用函数

2 个答案: