0

我想做以下事情：

我有三个复选框：

隐藏框1 隐藏框2 隐藏框3

我想使用 Jquery 来：

选中 Box1 时，隐藏框 2 和 3，如果未选中则使框 2 和 3 可见。另外我在哪里放置代码？

提前致谢

4

3 回答 3

1

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

参见 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>
于 2013-03-03T05:09:13.793 回答
0

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

$('.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/

于 2013-03-03T04:58:19.667 回答
0

假设您的复选框的 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>
于 2013-03-03T04:58:57.153 回答