在javascript和php中单击TAB菜单时清除或重置复选框
clear or reset checkbox when clicking tab menu in javascript and php
我有一个标签菜单看起来像这样。我希望复选框重置时，点击另一个选项卡菜单。
我更新了完整的php代码，以便轻松地找到编写代码中的任何错误。我搜索stackoverflow找到关于选项卡菜单与复选框重置解决方案，但我得到了一些解决方案，并实现了这些代码。我没能解决我的问题。请帮帮我。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>event list</title>
<link rel="stylesheet" href="<?php echo base_url('asset/css/tabcontent.css'); ?>" type="text/css"/>
<script type="text/javascript" src="<?php echo base_url('asset/js/tabcontent.js'); ?>"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body style="text-align:left">
<div class="container">
<div class="row">
<div class="col-lg-12">
<form method="post" action="" >
<div class="box">
<legend>Add New Bundle</legend>
<div class="text_box3">
<div>
<ul class="tabs" id="tabs" data-persist="true">
<li class="selected"><a href="#view1" onclick="$('#second').prop('checked', false);">All Images</a></li>
<li><a href="#view2" onclick="$('#first').prop('checked', false);">Category</a></li>
</ul>
<div class="tabcontents">
<div id="view1" style="overflow-y:scroll; height:200px;">
<?php
foreach ($get_all_img as $row){
echo '<div height="50px">
<label><input type="checkbox" name="first" id="first">';
echo '</label></div>';
}
?>
</div>
<div id="view2" style="overflow-y:scroll; height:200px;">
<?php
foreach($get_everything as $tasks){
//echo "<pre>";
//print_r($tasks);
echo '<div class="cat_name">'. $tasks['name'].'</div>';
echo "<ul>";
foreach($tasks as $task){
foreach($task as $p){
foreach($p as $pr){
echo '<div height="50px">
<label><input type="checkbox" name="second" id="second">';
echo '</label></div>';
}
}
}echo "</ul>";
}
?>
</div>
</div>
</div>
</div>
</div><br>
</form>
</div>
</div>
</div>
</body>
</html>
所以你可以用这个
代替你所有的代码<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>event list</title>
<link rel="stylesheet" href="<?php echo base_url('asset/css/tabcontent.css'); ?>" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body style="text-align:left">
<div class="container">
<div class="row">
<div class="col-lg-12">
<form method="post" action="" >
<div class="box">
<legend>Add New Bundle</legend>
<div class="text_box3">
<div>
<ul class="nav nav-tabs tabs" id="tabs" data-persist="true">
<li class="selected"><a href="#view1" data-toggle="tab" onclick="$('.second').prop('checked', false);">All Images</a></li>
<li><a href="#view2" data-toggle="tab" onclick="$('.first').prop('checked', false);">Category</a></li>
</ul>
<div class="tabcontents tab-content">
<div id="view1" class="tab-pane" style="overflow-y:scroll; height:200px;">
<?php
foreach ($get_all_img as $row){
echo '<div height="50px">
<label><input type="checkbox" name="first" class="first">';
echo '</label></div>';
}
?>
</div>
<div id="view2" class="tab-pane" style="overflow-y:scroll; height:200px;">
<?php
foreach($get_everything as $tasks){
//echo "<pre>";
//print_r($tasks);
echo '<div class="cat_name">'. $tasks['name'].'</div>';
echo "<ul>";
foreach($tasks as $task){
foreach($task as $p){
foreach($p as $pr){
echo '<div height="50px">
<label><input type="checkbox" name="second" class="second">';
echo '</label></div>';
}
}
}echo "</ul>";
}
?>
</div>
</div>
</div>
</div>
</div><br>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="<?php echo base_url('asset/js/tabcontent.js'); ?>"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
试试这个
<form method="post" action="" >
<div>
<ul class="tabs" id="tabs" data-persist="true">
<li class="selected"><a href="#view1" onclick="$('.second').prop('checked', false);">All Images</a></li>
<li><a href="#view2" onclick="$('.first').prop('checked', false);">Category</a></li>
</ul>
<div class="tabcontents">
<div id="view1" style="overflow-y:scroll; height:200px;">
<input type="checkbox" name="first" class="first">
</div>
<div id="view2" style="overflow-y:scroll; height:200px;">
<input type="checkbox" name="second" class="second">
</div>
</div>
</div>
</form>
演示(我使用bootstrap标签只是为了样式)
在js中添加的外部记录(确保在bootstrap js之前添加jquery)
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
https://jsfiddle.net/ax84wzzw/8/
$(function() {
var firstCheckox = $('[name = "first"]');
var secondCheckox = $('[name = "second"]');
var firstTab = $("#tab1");
var secondTab = $("#tab2");
firstTab.click(function() {
firstCheckox.attr("checked", true);
secondCheckox.attr("checked", false);
});
secondTab.click(function() {
firstCheckox.attr("checked", false);
secondCheckox.attr("checked", true);
});
})
是你想要的吗?
相关文章：
- 选中复选框时清除填充有datatime选取器数据的文本框
- 选中此之后剩余的复选框值.form.reset清除
- 使用 onChange 清除多个选择和复选框
- 如何使用Javascript清除基于复选框的文本框
- 清除“选中的复选框范围”值
- 取消选中复选框时隐藏和清除文本框
- jQuery UI 多选小部件清除所有复选框
- 无法清除 Jquery 中的所有复选框
- 如何在下次尝试之前从复选框中清除旧值
- jQuery清除日期选择器字段中的值，该值与未选中的复选框相关联
- 如何使用复选框取消选中来清除单选按钮
- 清除复选框按钮不起作用
- 更改单选按钮选择时清除复选框
- 如何使用javascript清除所有项目并在asp.net复选框列表中添加新项目
- 如何使用javascript保护用户清除复选框
- 如何清除复选框当选中其他复选框时?使用java脚本
- 单击“取消”按钮后清除选中的复选框
- 当标记/清除复选框时，引导复选框标签上的工具提示不会隐藏
- 切换融合表层:如何在选中新复选框时清除所有其他复选框
- Jquery清除复选框更改自动完成字段
