Checkbox , if ticked will display div if not ticked hide div

JavaScript
1

Hi,

I have a checkbox / radio button to select Yes or No ( 1 & 0 ) , If Yes then display the div1 and hide if not selected.

              <div class="form-group">
                <label class="col-sm-2 control-label">Taken Course Online ?: </label>
                <div class="col-sm-7">
					<input name="f_takenonline" type="radio" value="1" > Yes
                    <input name="f_takenonline" type="radio" value="0" checked> No
                </div>
              </div> 
             
            <div id="div1">
              <div class="form-group">
                <label class="col-sm-2 control-label">Name of On Course: </label>
                <div class="col-sm-7">
                 	<input maxlength="50" type="text" name="name"   placeholder="Enter name of your Training/Course">
                </div>
              </div> 
            </div>
3

Remove first DIV if flexbox side-by-side display not desired.

<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>

<title> Test Page </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<!-- From: https://www.sitepoint.com/community/t/checkbox-if-ticked-will-display-div-if-not-ticked-hide-div/391790 -->
<style>

</style>

</head><body>
<div style="display:flex; justify-content: space-between; width: 20rem;">

  <div class="form-group">
    <label class="col-sm-2 control-label">Taken Course Online ?: </label>
    <div class="col-sm-7">
      <label><input name="f_takenonline" type="radio" value="1" onclick='checkOnLine(value)'> Yes </label>
      <label><input name="f_takenonline" type="radio" value="0" onclick='checkOnLine(value)' checked> No </label>
    </div>
  </div> 
             
  <div id="div1">
    <div class="form-group">
      <label class="col-sm-2 control-label">Name of On Course: </label>
      <div class="col-sm-7">
        <input maxlength="50" type="text" name="name"   placeholder="Enter name of your Training/Course">
      </div>
    </div> 
  </div>

</div>
<script>
function checkOnLine(info) {
  document.getElementById('div1').style.display = 'none'; 
  if (info == 1) { document.getElementById('div1').style.display = ''; } 
}
checkOnLine(0);
</script>

</body></html>
4

Another approach.

html

<form>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">Taken Course Online ?: </label>
    <div class="col-sm-7">
      <input id="take-online-yes" name="take-online" type="radio">
      <label for='take-online-yes'>Yes</label>
      <input id="take-online-no" name="take-online" type="radio" checked>
      <label for='take-online-no'>No</label>
    </div>
  </div>
  
  <div id="course-online" class="form-group col-sm-7 hide">
    <label for="course-name" class="col-sm-2 control-label">Name of Course: </label>
    <div>
      <input 
        type="text" 
        id="course-name"
        name="name" 
        placeholder="Enter name of your Training/Course" 
        maxlength="50"
      >
    </div>
  </div>

</form>

css

.hide {
  display: none;
}

javascript

const takenOnlineInputs = document.querySelectorAll('[name="take-online"]')
const courseOnline = document.querySelector('#course-online')

takenOnlineInputs.forEach((elem) => {
  elem.addEventListener('click', (event) => {
    const hidden = event.target.id === 'take-online-no'
    
    courseOnline.classList.toggle('hide', hidden)
  })
})

Edit: see classList toggle force argument

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.