jQuery复选框

Question

I want to do the following: 我要执行以下操作：

I have three checkboxes: 我有三个复选框：

Hide Box1 Hide Box2 Hide Box3 隐藏框1隐藏框2隐藏框3

I want to use Jquery to: 我想使用Jquery来：

When Box1 checked, hide box 2 and 3, if unchecked make box 2 and 3 visible. 选中Box1时，如果未选中，则隐藏框2和3，使框2和3可见。 Also where do I place the code? 还要在哪里放置代码？

Thanks in advance 提前致谢

Answer 1

Here is a complete example using the markup you gave in the comment. 这是使用您在注释中提供的标记的完整示例。 I also took the liberty to give the checkbox's labels which means when you click the text it will toggle the checkbox (more accessible and usable). 我还随意提供了复选框的标签，这意味着当您单击文本时，它将切换复选框（更易于访问和使用）。

See on JSFiddle 在JSFiddle上查看

HTML 的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 jQuery的

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

To include jQuery in your page, place the following within your <head> tag. 要将jQuery包含在页面中，请将以下内容放在<head>标记内。

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

Answer 2

You could do this in between tags 您可以在标签之间进行操作

$('.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/ http://jsfiddle.net/davidchase03/MYASr/

Answer 3

Assuming your checkboxes have the ids "box1", "box2" and "box3": 假设您的复选框的ID为“ box1”，“ box2”和“ box3”：

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

I haven't tested this, but anytime hide box 1 is checked or unchecked, it will toggle the visibility of the other two boxes. 我尚未对此进行测试，但是只要隐藏框1被选中或未选中，它就会切换其他两个框的可见性。

The optimal place for your code would be inside of a script element located just before your closing body tag, so something like 您的代码的最佳位置是在脚本元素的内部，该脚本元素位于结束body标签之前，因此类似

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

jQuery复选框

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-03-03 05:09:13

解决方案2
0 2013-03-03 04:58:19

解决方案3
0 2013-03-03 04:58:57

jQuery复选框

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-03-03 05:09:13

解决方案2 0 2013-03-03 04:58:19

解决方案3 0 2013-03-03 04:58:57

解决方案1
1 已采纳 2013-03-03 05:09:13

解决方案2
0 2013-03-03 04:58:19

解决方案3
0 2013-03-03 04:58:57