how to display multiple div on click checkbox

user_15366313 0
Viewed 78

what I m try to do that when I click on checkbox then show the div element and I also when I unclick on uncheck box then hide the div element. in here below the code what i am trying its worked fine on point of functionality

but when i click the checkbox1 and checkbox2 then div element display (show) override.

Here is my code what i can try to do that.

My expectation result is look like this image link https://ibb.co/SXkTp6m

is there any help its very thankful

function addDay(e) {
  document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
  <input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
  <input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
  <input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
  <input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
  <input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
  <input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>

<div class="container">
  <div class="row" style="display:none;" id="lundi">Some content1</div>
  <div class="row" style="display:none;" id="mardi">Some content2</div>
  <div class="row" style="display:none;" id="mercredi">Some content3</div>
  <div class="row" style="display:none;" id="jeudi">Some content4</div>
  <div class="row" style="display:none;" id="vendredi">Some content5</div>
  <div class="row" style="display:none;" id="samedi">Some content6</div>
  <div class="row" style="display:none;" id="dimanche">Some content6</div>
</div>

bootstrap-4 css html jquery javascript
2 Answers

function addDay(e) {
  document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <input class="mr-1" type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
  <input class="mr-1" type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
  <input class="mr-1" type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
  <input class="mr-1" type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
  <input class="mr-1" type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
  <input class="mr-1" type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
  <input class="mr-1" type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>

<div class="container">
  <div class="row mr-2 ml-0" style="display:none;" id="lundi">Some content1</div>
  <div class="row mr-2 ml-0" style="display:none;" id="mardi">Some content2</div>
  <div class="row mr-2 ml-0" style="display:none;" id="mercredi">Some content3</div>
  <div class="row mr-2 ml-0" style="display:none;" id="jeudi">Some content4</div>
  <div class="row mr-2 ml-0" style="display:none;" id="vendredi">Some content5</div>
  <div class="row mr-2 ml-0" style="display:none;" id="samedi">Some content6</div>
  <div class="row mr-2 ml-0" style="display:none;" id="dimanche">Some content6</div>
</div>
problem occur because of row class has margin -15px

user_153212280 

 function addDay(e) {
              document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
            }
           
 .row{
            margin-right:20px !important
            }
       
<!DOCTYPE html>
<html>
    <head>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            
    </head>

<body>

<div class="container">
  <input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
  <input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
  <input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
  <input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
  <input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
  <input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
  <input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>

<div class="container">
  <div class="row" style="display:none;" id="lundi">Some content1</div>
  <div class="row" style="display:none;" id="mardi">Some content2</div>
  <div class="row" style="display:none;" id="mercredi">Some content3</div>
  <div class="row" style="display:none;" id="jeudi">Some content4</div>
  <div class="row" style="display:none;" id="vendredi">Some content5</div>
  <div class="row" style="display:none;" id="samedi">Some content6</div>
  <div class="row" style="display:none;" id="dimanche">Some content6</div>
</div>

</body>
</html>

You can apply margin-right on text. here is working demo check any checkbox and see the output.

user_153603990
Related