不是很熟悉前端,但我有4个复选框,我用它来过滤表数据。可以一次选择其中的任意数量。
我想实现的目标:
1.获取所有未选中的框
1.如果没有选中任何框,则通过(意味着不隐藏任何行)
1.如果选中了某个框,则对于任何未选中的框,将排除与该未选中框关联的行
这是一个Django应用程序,通过数据库查询生成表行id。该表最多有100行。根据我正在执行的查询,任何表行都将是:id=“音频”,id=“视频”,id=“写作”,id=“游戏”
超文本标记语言:
<div>
<input type="checkbox" value="music" id="music_filter">
<input type="checkbox" value="video" id="video_filter">
<input type="checkbox" value="writing" id="writing_filter">
<input type="checkbox" value="games" id="games_filter">
</div>
<table class="table">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
{% for i in query_set %}
<tbody>
<tr id="{{i.media_type}}">
<td>{{some data}}</td>
<td>{{some other data}}</td>
</tr>
</tbody>
字符串
我有jQuery加载通过CDN在html文件中,并尝试这样做:
JQUERY/JS:
$(document).ready(function(){
$('#music_filter', '#video_filter', '#writing_filter', '#games_filter').on('click',function(){
var notChecked = $("input:checkbox:not(:checked)");
if (notChecked.length > 0) {
for (let i = 0; i < notChecked.length; i++) {
$('#i').toggle();
};
};
});
});
型
能帮我看看我的错误吗?谢谢你,谢谢
1条答案
按热度按时间4xy9mtcn1#
如果要根据复选框显示/隐藏表中的行,可以执行以下操作:
使用以下命令将类添加到
<tr>
:音乐、视频、写作、游戏和添加一个自定义类,如all-genre
。我猜i.media_type
包含音乐,视频,写作,游戏,所以改变id类。然后使用下面的jquery代码段:
字符串
但这只在当前页面上有效。如果您使用分页,它不会调整页面的数量,因为我们没有使用get/post请求来呈现新数据。
未测试,因此您可能需要调整代码以满足您的需要。