Question

我想做以下事情：

我有三个复选框：

隐藏Box1 隐藏Box2 隐藏Box3

我想使用Jquery：

当Box1选中时，隐藏方框2和3，如果未选中，则显示方框2和3。我还在哪里放置代码？

提前致谢

Answer 1

以下是使用您在评论中提供的标记的完整示例。我也冒昧地给出了复选框的标签，这意味着当你点击文本时它会切换复选框（更易于访问和使用）。

See on JSFiddle

<强> HTML

<form>
    <div class="toggle-checkbox">
        <input type="checkbox" name="checkMeOut" id="box1" />
        <label for="box1">Hide Box1</label>
    </div>
    <div class="toggle-checkbox">
        <input type="checkbox" name="checkMeOut" id="box2" />
        <label for="box2">Hide Box2</label>
    </div>
    <div class="toggle-checkbox">
        <input type="checkbox" name="checkbox3" id="box3" />
        <label for="box3">Hide Box3</label>
    </div>
</form>

<强>的jQuery

$('.toggle-checkbox input[type=checkbox]').click(function () {
    if ($(this).is(':checked')) {
        $('.toggle-checkbox').not($(this).closest('.toggle-checkbox')).hide();
    } else {
        $('.toggle-checkbox').show();
    }
});

要在您的网页中加入jQuery，请将以下内容放在<head>代码中。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Answer 2

您可以在标签之间执行此操作

$('.one').click(function () {
if ($(this).is(':checked')) {
    $('input[type=checkbox]').not(this).hide();
} else {
    $('input[type=checkbox]').not(this).show();
}
});

http://jsfiddle.net/davidchase03/MYASr/

Answer 3

假设您的复选框中包含ID“box1”，“box2”和“box3”：

$(document).ready(function(){
    $("#box1").change(function(){
        $("#box2, #box3").toggle();
    }
}

我没有对此进行测试，但无论何时选中或取消选中隐藏框1，它都会切换其他两个框的可见性。

您的代码的最佳位置将位于关闭正文标记之前的脚本元素内部，因此类似

<body>
Your page stuff here
<script>
Code from above here
</script>
</body>

Jquery复选框

3 个答案: