<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
美好的一天!想要使用复选框属性(“选中”、假/真)隐藏/显示元素。所以我创建了这个例子来解释我想要的东西。
https://jsfiddle.net/9LzLm9hx/4/
尝试选中和取消选中类别复选框,然后按下按钮 hide/show
。当此复选框为 false
时,它会隐藏,但之后我无法将它们设置为 true
。谢谢。
最佳答案
您可以在您的元素中使用相同的 id
和 class
名称,您可以总结如下:
$('.js-ok').on('click', function() {
//iterate through checkboxes
$(".custom-checkbox :checkbox").each(function() {
//toggle specific element according to the checkbox status
$("." + $(this).attr("id")).toggle($(this).prop("checked"));
})
});
#common {
margin-left: 20px;
}
#common + label + span {
font-size: 21px;
color: red;
}
.col-xs-3 {
margin-top: 29px;
border: 1px solid black;
}
.category {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="modal-body row col-xs-12">
<div class="col-xs-8 common-inputs">
<form role="form" class="left-checkbox-container col-xs-12">
<div class="custom-checkbox checkbox-title">
<input type="checkbox" id="common" />
<label for="common"></label> <span>Common</span>
</div>
</form>
<form role="form" class="left-checkbox-container col-xs-5">
<div class="custom-checkbox">
<input type="checkbox" id="post-id" />
<label for="post-id"></label> <span>ID</span>
</div>
<div class="custom-checkbox">
<input type="checkbox" id="active" name="check" />
<label for="activation"></label> <span>Active</span>
</div>
<div class="custom-checkbox">
<input type="checkbox" id="info" name="check" />
<label for="information"></label> <span>info</span>
</div>
</form>
<form role="form" class="left-checkbox-container col-xs-5">
<div class="custom-checkbox">
<input type="checkbox" id="onOff" />
<label for="on-off"></label> <span>on/off</span>
</div>
<div class="custom-checkbox">
<input type="checkbox" id="socialNet" name="check" />
<label for="social-network"></label> <span>social</span>
</div>
<div class="custom-checkbox">
<input type="checkbox" id="category" name="check" />
<label for="category"></label> <span>category</span>
</div>
</form>
<button class='btn btn-primary js-ok'>hide/show category</button>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class='col-xs-3 post-id'>id</div>
<div class='col-xs-3 active'>active</div>
<div class='col-xs-3 info'>info</div>
<div class='col-xs-3 onOff'>on/off</div>
<div class='col-xs-3 socialNet'>social</div>
<div class='col-xs-3 category'>category</div>
</div>
</div>
</div>
引用资料
关于javascript - 使用复选框隐藏和显示元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34042380/
相关文章:
javascript - 用于选择所有文本节点的 XPath
javascript - 如何访问外部加载的 svg 文件的 id?
Android Studio 如何使 WebView 支持阿拉伯语,即 RTL 文本方向?
jquery - 如何排除 jQuery DataTable 中的最后一列
jquery - :visible not working with :nth-child selector
javascript - 在 FF 中淡入 <li> 时,项目符号点不显示
javascript - 对大多数请求使用 socket.io 是不好的还是我应该只使用它来将数据推送到客户端?