Bollate

HTML

[ANSWERED] javascript – Checkbox not checking and hiding even if in the same form/div

By

Nov 19, 2022 , , ,

Solution 1 :

One way that you might do this with an unlimited number ( potentially ) of form elements would be to make use of form.elements and check that the target clicked is within that collection

const form = document.forms.more_form;
const bttn = document.querySelector('div.bttn_wrapper button.bttn');

document.body.addEventListener('click', e => {
  e.stopPropagation();


  const elems=Array.from( form.elements );

  if (( e.target == bttn && more_form.parentNode.style.visibility !== 'visible' ) || e.target == more_form || e.target.parentNode == more_form || elems.includes( e.target ) ) {
  form.parentNode.style.visibility = 'visible'
  } else {
  form.parentNode.style.visibility = 'hidden'
  }
})
* {
  margin: 0;
  padding: 0;
  /*    border: thin solid blue;*/
  font-family: 'Roboto', sans-serif;
}

html {
  height: 100%;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.spacer {
  min-height: 300px;
  text-align: center;
}

.search_box_flex_main_container {
  /*    border: thick solid red;*/
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}

.button_wrapper {
  background: white none repeat scroll 0% 0%;
  border-radius: 6px;
  height: 48px;
}

.button {
  min-width: 120px;
}

.building_text_input {
  min-width: 200px;
  text-align: center;
}

.city_form {
  text-align: center;
}

.more_button_container {
  border: thick solid yellow;
}

.more_button_wrapper {
  border: thick solid red;
}

.more_form {
  display: flex;
  flex-direction: column;
  border: thick solid green;
}

.amenities_check_box_small_row_container {
  display: flex;
}

form.more_form>* {
  border: thin dotted blue;
}



[type='checkbox']{margin:0 1rem;}
form{background:pink}
<div class="bttn_container">
  <p>Yellow: .bttn_container</p>

  <div class="bttn_wrapper">
  <p>Red: .bttn_wrapper</p>
  <button class="bttn">More</button>
  </div>


  <div class="more_form_container" style="visibility: hidden;">

  <form class="more_form" name="more_form">
    <p>Green: .more_form</p>
    <h4>Furnishing</h4>
    <select>
    <option value="show_all">Show All</option>
    <option value="furnished">Furnished</option>
    <option value="unfurnished">Unfurnished</option>
    </select>
    <h4>Amenities</h4>
    <div class="amenities_check_box_small_row_container">
    <input type="checkbox" id="maids_room" name="maids_room" value="maids_room">
    <label for="maids_room"> Maids Room</label><br>
    <input type="checkbox" id="study" name="study" value="study">
    <label for="study"> Study</label><br>
    </div>
    <div class="amenities_check_box_small_row_container">
    <input type="checkbox" id="central_ac" name="central_ad" value="central_ad">
    <label for="central_ac"> Central AC </label><br>
    <input type="checkbox" id="balcony" name="balcony" value="balcony">
    <label for="balcony"> Balcony </label><br>
    </div>
    <div class="amenities_check_box_small_row_container">
    <input type="checkbox" id="privet_garden" name="privet_garden" value="privet_garden">
    <label for="privet_garden"> Private Garden </label><br>
    <input type="checkbox" id="private_pool" name="private_pool" value="private_pool">
    <label for="private_pool"> Private Pool </label><br>
    </div>
    <div class="amenities_check_box_small_row_container">
    <input type="checkbox" id="private_gym" name="private_gym" value="private_gym">
    <label for="private_gym"> Private Gym </label><br>
    <input type="checkbox" id="private_jacuzzi" name="private_jacuzzi" value="private_jacuzzi">
    <label for="private_jacuzzi"> Private Jacuzzi</label><br>
    </div>
    <div class="amenities_check_box_small_row_container">
    <input type="checkbox" id="shared_pool" name="shared_pool" value="shared_pool">
    <label for="shared_pool"> Shared Pool </label><br>
    <input type="checkbox" id="shared_spa" name="shared_spa" value="shared_spa">
    <label for="shared_spa"> Shared Spa </label><br>
    </div>
    <div class="amenities_check_box_small_row_container">
    <input type="checkbox" id="shared_gym" name="shared_gym" value="shared_gym">
    <label for="shared_gym"> Shared Gym </label><br>
    <input type="checkbox" id="security" name="security" value="security">
    <label for="security"> Security </label><br>
    </div>
    <div class="amenities_check_box_small_row_container">
    <input type="checkbox" id="concierge_service" name="concierge_service" value="concierge_service">
    <label for="concierge_service"> Concierge Service </label><br>
    <input type="checkbox" id="maid_service" name="maid_service" value="maid_service">
    <label for="maid_service"> Maid Service </label><br>
    </div>
    <div class="amenities_check_box_small_row_container">
    <input type="checkbox" id="covered_parking" name="covered_parking" value="covered_parking">
    <label for="covered_parking"> Covered Parking </label><br>
    <input type="checkbox" id="built_in_wardrobe" name="built_in_wardrobe" value="built_in_wardrobe">
    <label for="built_in_wardrobe"> Built-in Wardrobe </label><br>
    </div>
    <div class="amenities_check_box_small_row_container">
    <input type="checkbox" id="walk_in_closet" name="walk_in_closet" value="walk_in_closet">
    <label for="walk_in_closet"> Walk-in Closet </label><br>
    <input type="checkbox" id="built_in_kitchen" name="built_in_kitchen" value="built_in_kitchen">
    <label for="built_in_kitchen"> Built-in Kitchen </label><br>
    </div>
    <div class="amenities_check_box_small_row_container">
    <input type="checkbox" id="view_of_water" name="view_of_water" value="view_of_water">
    <label for="view_of_water"> View Of Water </label><br>
    <input type="checkbox" id="view_of_landmark" name="view_of_landmark" value="view_of_landmark">
    <label for="view_of_landmark"> View Of Landmark </label><br>
    </div>
    <div class="amenities_check_box_small_row_container">
    <input type="checkbox" id="pets_allowed" name="pets_allowed" value="pets_allowed">
    <label for="pets_allowed"> Pets Allowed </label><br>
    </div>

    <h4>Rent Is Paid</h4>
    <div class="amenities_check_box_small_row_container">
    <input type="checkbox" id="yearly" name="yearly" value="yearly">
    <label for="yearly"> Yearly </label><br>
    <input type="checkbox" id="bi_yearly" name="bi_yearly" value="bi_yearly">
    <label for="bi_yearly"> Bi-Yearly </label><br>
    </div>
    <div class="amenities_check_box_small_row_container">
    <input type="checkbox" id="quarterly" name="quarterly" value="quarterly">
    <label for="quarterly"> Quarterly </label><br>
    <input type="checkbox" id="monthly" name="monthly" value="monthly">
    <label for="monthly"> Monthly </label><br>
    </div>
    <h4>Keyword Search</h4>
    <input type="text" placeholder="Eg. Pool, Security, Ref.ID Number">
    <h4>Bathroom</h4>
    <select>
    <option value="one_bathroom">1 Bathroom or More</option>
    <option value="two_bathroom">2 Bathroom or More</option>
    <option value="three_bathroom">3 Bathroom or More</option>
    <option value="four_bathroom">4 Bathroom or More</option>
    <option value="five_bathroom">5 Bathroom or More</option>
    <option value="six_bathroom">6 Bathroom or More</option>
    <option value="seven_bathroom">7 Bathroom or More</option>
    <option value="eight_bathroom">8 Bathroom or More</option>
    <option value="nine_bathroom">9 Bathroom or More</option>
    <option value="ten_bathroom">10 Bathroom or More</option>
    <option value="eleven_bathroom">11 Bathroom or More</option>
    <option value="twelve_bathroom">12 Bathroom or More</option>
    </select>
    <div class="amenities_check_box_small_row_container">
    <h4>Size</h4>
    <input type="number">
    <input type="number">
    </div>
    <div class="amenities_check_box_small_row_container">
    <h4>Ads with video only</h4>
    <input type="checkbox" id="ads_with_video_only" name="ads_with_video_only" value="ads_with_video_only">
    <h4>Ads with tour only</h4>
    <input type="checkbox" id="ads_with_tour_only" name="ads_with_tour_only" value="ads_with_tour_only">
    </div>
    <div class="amenities_check_box_small_row_container">
    <button> Save </button>
    <button> Search </button>
    </div>
  </form>
  </div>
</div>

Solution 2 :

You need to place the check on the more_button right to the top. So, if a click lands on anything other than the more_button nothing will happen instead if your previous action making everything disappear.

const more_form = document.getElementById('more_form');
const more_button = document.querySelector('div.more_button_wrapper button.more_button');
document.body.addEventListener('click', e => { if(e.target!=more_button) return true;
  e.preventDefault();
  e.stopPropagation();
  const frmstyle=more_form.parentNode.style; 
  frmstyle.visibility=frmstyle.visibility=="visible"?"hidden":"visible";
})
* {
  margin: 0;
  padding: 0;
  /*    border: thin solid blue;*/
  font-family: 'Roboto', sans-serif;
}

html {
  height: 100%;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.spacer {
  min-height: 300px;
  text-align: center;
}

.search_box_flex_main_container {
  /*    border: thick solid red;*/
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}

.button_wrapper {
  background: white none repeat scroll 0% 0%;
  border-radius: 6px;
  height: 48px;
}

.button {
  min-width: 120px;
}

.building_text_input {
  min-width: 200px;
  text-align: center;
}

.city_form {
  text-align: center;
}

.more_button_container {
  border: thick solid yellow;
}

.more_button_wrapper {
  border: thick solid red;
}

.more_form {
  display: flex;
  flex-direction: column;
  border: thick solid green;
}

.amenities_check_box_small_row_container {
  display: flex;
}

form.more_form>* {
  border: thin dotted blue;
}
<div class="more_button_container">
  <p>Yellow: .more_button_container</p>
  <div class="more_button_wrapper">
    <p>Red: .more_button_wrapper</p>
    <button class="more_button">More</button>
  </div>
  <div class="more_form_container" style="visibility: hidden;">
    <form class="more_form" id="more_form">
      <p>Green: .more_form</p>
      <h4>Furnishing</h4>
      <select>
        <option value="show_all">Show All</option>
        <option value="furnished">Furnished</option>
        <option value="unfurnished">Unfurnished</option>
      </select>
      <h4>Amenities</h4>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="maids_room" name="maids_room" value="maids_room">
        <label for="maids_room"> Maids Room</label><br>
        <input type="checkbox" id="study" name="study" value="study">
        <label for="study"> Study</label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="central_ac" name="central_ad" value="central_ad">
        <label for="central_ac"> Central AC </label><br>
        <input type="checkbox" id="balcony" name="balcony" value="balcony">
        <label for="balcony"> Balcony </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="privet_garden" name="privet_garden" value="privet_garden">
        <label for="privet_garden"> Private Garden </label><br>
        <input type="checkbox" id="private_pool" name="private_pool" value="private_pool">
        <label for="private_pool"> Private Pool </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="private_gym" name="private_gym" value="private_gym">
        <label for="private_gym"> Private Gym </label><br>
        <input type="checkbox" id="private_jacuzzi" name="private_jacuzzi" value="private_jacuzzi">
        <label for="private_jacuzzi"> Private Jacuzzi</label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="shared_pool" name="shared_pool" value="shared_pool">
        <label for="shared_pool"> Shared Pool </label><br>
        <input type="checkbox" id="shared_spa" name="shared_spa" value="shared_spa">
        <label for="shared_spa"> Shared Spa </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="shared_gym" name="shared_gym" value="shared_gym">
        <label for="shared_gym"> Shared Gym </label><br>
        <input type="checkbox" id="security" name="security" value="security">
        <label for="security"> Security </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="concierge_service" name="concierge_service" value="concierge_service">
        <label for="concierge_service"> Concierge Service </label><br>
        <input type="checkbox" id="maid_service" name="maid_service" value="maid_service">
        <label for="maid_service"> Maid Service </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="covered_parking" name="covered_parking" value="covered_parking">
        <label for="covered_parking"> Covered Parking </label><br>
        <input type="checkbox" id="built_in_wardrobe" name="built_in_wardrobe" value="built_in_wardrobe">
        <label for="built_in_wardrobe"> Built-in Wardrobe </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="walk_in_closet" name="walk_in_closet" value="walk_in_closet">
        <label for="walk_in_closet"> Walk-in Closet </label><br>
        <input type="checkbox" id="built_in_kitchen" name="built_in_kitchen" value="built_in_kitchen">
        <label for="built_in_kitchen"> Built-in Kitchen </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="view_of_water" name="view_of_water" value="view_of_water">
        <label for="view_of_water"> View Of Water </label><br>
        <input type="checkbox" id="view_of_landmark" name="view_of_landmark" value="view_of_landmark">
        <label for="view_of_landmark"> View Of Landmark </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="pets_allowed" name="pets_allowed" value="pets_allowed">
        <label for="pets_allowed"> Pets Allowed </label><br>
      </div>

      <h4>Rent Is Paid</h4>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="yearly" name="yearly" value="yearly">
        <label for="yearly"> Yearly </label><br>
        <input type="checkbox" id="bi_yearly" name="bi_yearly" value="bi_yearly">
        <label for="bi_yearly"> Bi-Yearly </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="quarterly" name="quarterly" value="quarterly">
        <label for="quarterly"> Quarterly </label><br>
        <input type="checkbox" id="monthly" name="monthly" value="monthly">
        <label for="monthly"> Monthly </label><br>
      </div>
      <h4>Keyword Search</h4>
      <input type="text" placeholder="Eg. Pool, Security, Ref.ID Number">
      <h4>Bathroom</h4>
      <select>
        <option value="one_bathroom">1 Bathroom or More</option>
        <option value="two_bathroom">2 Bathroom or More</option>
        <option value="three_bathroom">3 Bathroom or More</option>
        <option value="four_bathroom">4 Bathroom or More</option>
        <option value="five_bathroom">5 Bathroom or More</option>
        <option value="six_bathroom">6 Bathroom or More</option>
        <option value="seven_bathroom">7 Bathroom or More</option>
        <option value="eight_bathroom">8 Bathroom or More</option>
        <option value="nine_bathroom">9 Bathroom or More</option>
        <option value="ten_bathroom">10 Bathroom or More</option>
        <option value="eleven_bathroom">11 Bathroom or More</option>
        <option value="twelve_bathroom">12 Bathroom or More</option>
      </select>
      <div class="amenities_check_box_small_row_container">
        <h4>Size</h4>
        <input type="number">
        <input type="number">
      </div>
      <div class="amenities_check_box_small_row_container">
        <h4>Ads with video only</h4>
        <input type="checkbox" id="ads_with_video_only" name="ads_with_video_only" value="ads_with_video_only">
        <h4>Ads with tour only</h4>
        <input type="checkbox" id="ads_with_tour_only" name="ads_with_tour_only" value="ads_with_tour_only">
      </div>
      <div class="amenities_check_box_small_row_container">
        <button> Save </button>
        <button> Search </button>
      </div>
    </form>
  </div>
</div>

Problem :

How to make boxes checkable and not hiding when in the same form?

What works:

  • Button (hide/display)
  • Furnishing (dropdown)
  • Keyword Search (text input)
  • Bathroom (dropdown)
  • Save (button)
  • Search (button)

NOT WORKING:

  • All checkboxes
  • Size (2 text input)

How to make sure that I can use and check all the element of this form?

const more_form = document.getElementById('more_form');
const more_button = document.querySelector('div.more_button_wrapper button.more_button');
document.body.addEventListener('click', e => {
  e.preventDefault();
  e.stopPropagation();
  if ((e.target == more_button && more_form.parentNode.style.visibility !== 'visible') || e.target == more_form || e.target.parentNode == more_form) {
    more_form.parentNode.style.visibility = 'visible'
  } else {
    more_form.parentNode.style.visibility = 'hidden'
  }
})
* {
  margin: 0;
  padding: 0;
  /*    border: thin solid blue;*/
  font-family: 'Roboto', sans-serif;
}

html {
  height: 100%;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.spacer {
  min-height: 300px;
  text-align: center;
}

.search_box_flex_main_container {
  /*    border: thick solid red;*/
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}

.button_wrapper {
  background: white none repeat scroll 0% 0%;
  border-radius: 6px;
  height: 48px;
}

.button {
  min-width: 120px;
}

.building_text_input {
  min-width: 200px;
  text-align: center;
}

.city_form {
  text-align: center;
}

.more_button_container {
  border: thick solid yellow;
}

.more_button_wrapper {
  border: thick solid red;
}

.more_form {
  display: flex;
  flex-direction: column;
  border: thick solid green;
}

.amenities_check_box_small_row_container {
  display: flex;
}

form.more_form>* {
  border: thin dotted blue;
}
<div class="more_button_container">
  <p>Yellow: .more_button_container</p>
  <div class="more_button_wrapper">
    <p>Red: .more_button_wrapper</p>
    <button class="more_button">More</button>
  </div>
  <div class="more_form_container" style="visibility: hidden;">
    <form class="more_form" id="more_form">
      <p>Green: .more_form</p>
      <h4>Furnishing</h4>
      <select>
        <option value="show_all">Show All</option>
        <option value="furnished">Furnished</option>
        <option value="unfurnished">Unfurnished</option>
      </select>
      <h4>Amenities</h4>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="maids_room" name="maids_room" value="maids_room">
        <label for="maids_room"> Maids Room</label><br>
        <input type="checkbox" id="study" name="study" value="study">
        <label for="study"> Study</label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="central_ac" name="central_ad" value="central_ad">
        <label for="central_ac"> Central AC </label><br>
        <input type="checkbox" id="balcony" name="balcony" value="balcony">
        <label for="balcony"> Balcony </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="privet_garden" name="privet_garden" value="privet_garden">
        <label for="privet_garden"> Private Garden </label><br>
        <input type="checkbox" id="private_pool" name="private_pool" value="private_pool">
        <label for="private_pool"> Private Pool </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="private_gym" name="private_gym" value="private_gym">
        <label for="private_gym"> Private Gym </label><br>
        <input type="checkbox" id="private_jacuzzi" name="private_jacuzzi" value="private_jacuzzi">
        <label for="private_jacuzzi"> Private Jacuzzi</label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="shared_pool" name="shared_pool" value="shared_pool">
        <label for="shared_pool"> Shared Pool </label><br>
        <input type="checkbox" id="shared_spa" name="shared_spa" value="shared_spa">
        <label for="shared_spa"> Shared Spa </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="shared_gym" name="shared_gym" value="shared_gym">
        <label for="shared_gym"> Shared Gym </label><br>
        <input type="checkbox" id="security" name="security" value="security">
        <label for="security"> Security </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="concierge_service" name="concierge_service" value="concierge_service">
        <label for="concierge_service"> Concierge Service </label><br>
        <input type="checkbox" id="maid_service" name="maid_service" value="maid_service">
        <label for="maid_service"> Maid Service </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="covered_parking" name="covered_parking" value="covered_parking">
        <label for="covered_parking"> Covered Parking </label><br>
        <input type="checkbox" id="built_in_wardrobe" name="built_in_wardrobe" value="built_in_wardrobe">
        <label for="built_in_wardrobe"> Built-in Wardrobe </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="walk_in_closet" name="walk_in_closet" value="walk_in_closet">
        <label for="walk_in_closet"> Walk-in Closet </label><br>
        <input type="checkbox" id="built_in_kitchen" name="built_in_kitchen" value="built_in_kitchen">
        <label for="built_in_kitchen"> Built-in Kitchen </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="view_of_water" name="view_of_water" value="view_of_water">
        <label for="view_of_water"> View Of Water </label><br>
        <input type="checkbox" id="view_of_landmark" name="view_of_landmark" value="view_of_landmark">
        <label for="view_of_landmark"> View Of Landmark </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="pets_allowed" name="pets_allowed" value="pets_allowed">
        <label for="pets_allowed"> Pets Allowed </label><br>
      </div>

      <h4>Rent Is Paid</h4>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="yearly" name="yearly" value="yearly">
        <label for="yearly"> Yearly </label><br>
        <input type="checkbox" id="bi_yearly" name="bi_yearly" value="bi_yearly">
        <label for="bi_yearly"> Bi-Yearly </label><br>
      </div>
      <div class="amenities_check_box_small_row_container">
        <input type="checkbox" id="quarterly" name="quarterly" value="quarterly">
        <label for="quarterly"> Quarterly </label><br>
        <input type="checkbox" id="monthly" name="monthly" value="monthly">
        <label for="monthly"> Monthly </label><br>
      </div>
      <h4>Keyword Search</h4>
      <input type="text" placeholder="Eg. Pool, Security, Ref.ID Number">
      <h4>Bathroom</h4>
      <select>
        <option value="one_bathroom">1 Bathroom or More</option>
        <option value="two_bathroom">2 Bathroom or More</option>
        <option value="three_bathroom">3 Bathroom or More</option>
        <option value="four_bathroom">4 Bathroom or More</option>
        <option value="five_bathroom">5 Bathroom or More</option>
        <option value="six_bathroom">6 Bathroom or More</option>
        <option value="seven_bathroom">7 Bathroom or More</option>
        <option value="eight_bathroom">8 Bathroom or More</option>
        <option value="nine_bathroom">9 Bathroom or More</option>
        <option value="ten_bathroom">10 Bathroom or More</option>
        <option value="eleven_bathroom">11 Bathroom or More</option>
        <option value="twelve_bathroom">12 Bathroom or More</option>
      </select>
      <div class="amenities_check_box_small_row_container">
        <h4>Size</h4>
        <input type="number">
        <input type="number">
      </div>
      <div class="amenities_check_box_small_row_container">
        <h4>Ads with video only</h4>
        <input type="checkbox" id="ads_with_video_only" name="ads_with_video_only" value="ads_with_video_only">
        <h4>Ads with tour only</h4>
        <input type="checkbox" id="ads_with_tour_only" name="ads_with_tour_only" value="ads_with_tour_only">
      </div>
      <div class="amenities_check_box_small_row_container">
        <button> Save </button>
        <button> Search </button>
      </div>
    </form>
  </div>
</div>

Comments

Comment posted by Kato Design TM

Thanks, I have tried but it still does not let me check the boxes.

Comment posted by Kato Design TM

Thanks, I have also tried this and still does not let me check the boxes.

Comment posted by freedomn-m

Honestly, not entirely sure what your code is there for – is it just to expand/collapse on [more]? Or is it also to collapse the “form” if the user clicks outside the form?

Comment posted by Daisy

Do you only want the form to show/hide when you click on the more button or should it close if you click anywhere outside of the form area?

By

Related Post

HTML

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022
HTML

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022
HTML

[ANSWERED] html – How to include a clickable image behind a link

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022