Question

我有以下表格：

<form class="form-inline" role="form">
    <div class="col-xs-3">
        <div class="pic-container">
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="discounting" onchange='handleChange(this);' id='check11' > Show only price-discounted products
                </label>
            </div>

        </div>
    </div>
    <div class="col-xs-3">
        <div class="pic-container">
            <div class="checkbox" id='check21'>
                <label>
                    <input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
                </label>
            </div>
        </div>
    </div>
</form>

我希望能够在检查第一个复选框后自动检查第二个复选框。我尝试使用以下脚本：

<script>        
function handleChange(cb) {
    if(cb.checked == true) {
       alert('Message 1');  
       document.getElementById("check21").checked = true;
    } else {
       alert('Message 2');
       var x = document.getElementById("check21").disabled= false;
    }
}
</script>

但它起作用并不起作用，因为我认为引导程序是类的问题。

Answer 1

Didier指出的问题是你有两个具有相同ID的元素：

<div class="checkbox" id='check21'>

和

<input   type="checkbox" name="discounting" onchange='' id='check21'>

对document.getElementById('check21')的调用可能（因为行为未定义）将返回第一个，在这种情况下是<div>元素，而不是复选框。

您不得在两个HTML元素上使用相同的ID，因此您需要更改其中一个或另一个的ID。

Answer 2

http://jsfiddle.net/uywaxds5/2/

我将boostrap作为外部参考。

<div class="checkbox" id='check22'>
    <label>
        <input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
    </label>
</div>

修复重复ID似乎有效。如果它不起作用，问题可能在您的代码的另一部分。

Answer 3

为第二个单选按钮使用不同的名称

 <input   type="checkbox" name="discounting21">

只能有一个选定的单选按钮属于同一组（即名称）。

Javascript通过id检查bootstrap复选框

3 个答案: