Kazi Nayem Kazi Nayem - 2 months ago 5
HTML Question

clear or reset checkbox when clicking tab menu in javascript and php

i have a tab menu look like this. I want the checkbox reset when clicking another tab menu.

I updated my full php code to find easily any mistaken in the code written.
I search stackoverflow to find about tab menu with checkbox reset solution but i got some solution and implemented those code. i failed to solve my problem. please help me.

<!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">




<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>

Answer

So you can replace all your code with this

<!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>