jQuery的复选框

我要做到以下几点：jQuery的复选框

我有三个复选框：

隐藏BOX1 隐藏BOX2 隐藏BOX3

我想使用jQuery ：

当Box1选中时，隐藏框2和3，我f取消选中使框2和3可见。我还在哪里放置代码？

在此先感谢

2013-03-03 Bob Sanders

隐藏BOX1 隐藏BOX2 隐藏BOX3 <脚本类型= “文本/ JavaScript的”> 如果（$（“＃box1”）。attr（“checked”）== true） { alert（“Checked”）; } else { alert（“Unchecked”）; } – 2013-03-03 04:58:58

邮政编码有问题，它可以被格式化，而不是在注释中。显示的代码对于复选框语法也是无效的 – charlietfl 2013-03-03 05:19:47

下面是使用你的评论给了标记一个完整的例子。我还自由地给出了复选框的标签，这意味着当您单击文本时，它将切换复选框（更易于访问和使用）。

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>

来源

2013-03-03 05:09:13

这适用于JS小提琴，但是当我把它放在我的记事本++和刷新我的铬没有任何作品。我需要安装一些东西吗？ – 2013-03-03 07:39:34

你有没有包含jQuery？假如你有.toggle-check div，一切都应该工作。 – 2013-03-03 08:11:00

谢谢你完美的作品！我需要他们浮动内联，而不是列表样式，虽然 – 2013-03-03 08:16:44

你可以标记之间为此在

$('.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-03 04:58:19

假设您的复选框有ID为 “盒1”， “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-03 04:58:57

如果您想使用其他框，David Chase的答案肯定会对您有所帮助。它也更好地使用jQuery的选择器。虽然脚本的位置是相同的。 – 2013-03-03 05:00:25

jQuery的复选框

回答

相关问题