Question 37083 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Add if and else in javascript function to show div – Jquery

I have a Javascript code with if and alse. Practically, I have two div that will show after selected checkbox (one and/or both) and click on link.

I’d like that for the first time divs shall go in show when click on link, starting from after first click I’d like show div only if user click on checkboxes.

I use myvariable to made this check, but seems that doesn’t work.. Following the code:

<label for="myCheck1">Checkbox1:</label> 
<input type="checkbox" id="chk1" onclick="showDiv2()">
<label for="myCheck2">Checkbox2:</label> 
<input type="checkbox" id="chk2" onclick="showDiv2()"><br>
<a id="link-id" href="javascript: void(0)">Next</a>
<div id="text1" class="div1">Div no 1</div>
<div id="text2" class="div2">Div no 2</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


$div1 = $(".div1");
$div2 = $(".div2");

$div1.hide()
$div2.hide()

let myvariable = false;

if (myvariable == false) {

  function showDiv1() {
    myvariable = true;
    if (document.getElementById('chk1').checked) {
      $div1.show()
    } else {
      $div1.hide()
    }
    if (document.getElementById('chk2').checked) {
      $div2.show()
    } else {
      $div2.hide()
    }
  }
  $('#link-id').on('click', showDiv1)


} else {

  function showDiv2() {
    var checkBox1 = document.getElementById("chk1");
    var text1 = document.getElementById("text1");
    var checkBox2 = document.getElementById("chk2");
    var text2 = document.getElementById("text2");

    if (checkBox1.checked == true) {
      text1.style.display = "block";
    } else {
      text1.style.display = "none";
    }
    if (checkBox2.checked == true) {
      text2.style.display = "block";
    } else {
      text2.style.display = "none";
    }
  }
}
Tags:

2

Answers


  1. 0

    No need to use if and variables like this

    $('document').ready(function() {
  $(".div1").hide();
  $(".div2").hide();
});
$("#chk1").on('change',function() {
  if (this.checked) {
    $('.div1').show()
  } else {
    $('.div1').hide()
  }
});
$("#chk2").on('change',function() {
  if (this.checked) {
    $('.div2').show()
  } else {
    $('.div2').hide()
  }
});
    Login or Signup to reply.
  2. 0

    Rewritten your code to make it work

    const div1 = $(".div1");
const div2 = $(".div2");
const checkBox1 = document.getElementById("chk1");
const checkBox2 = document.getElementById("chk2");
const text1 = $("#text1");
const text2 = $("#text2");
let nextClicked = false;


$('#link-id').on('click', () => {
  nextClicked = true;
  showDivs()
})

function showDivs() {
  if (!nextClicked) return;
  
  if (checkBox1.checked) {
    text1.show();
  } else {
    text1.hide();
  }
  if (checkBox2.checked) {
    text2.show();
  } else {
    text2.hide();
  }
}
    .hidden {
  display: none;
}
    <label for="myCheck1">Checkbox1:</label> 
<input type="checkbox" id="chk1" onclick="showDivs()">
<label for="myCheck2">Checkbox2:</label> 
<input type="checkbox" id="chk2" onclick="showDivs()"><br>
<a id="link-id" href="javascript: void(0)">Next</a>
<div id="text1" class="div1 hidden">Div no 1</div>
<div id="text2" class="div2 hidden">Div no 2</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search