I'm not able to get my radio buttons or checkboxes to either check or uncheck. My application is wrapped inside of an 'app container'. The containers used for the main layout use flexbox for alignment. When I move the html outside of the application container, the checkboxes and radio buttons work perfectly but they are unresponsive inside of the app container. Any ideas of what could be causing this issue? It's a pretty big program so I will just upload the HTML for now. Thanks for any and all help.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="src/sass/main.scss" />
<!-- leaflet css -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script defer src="src/js/controller.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDKARpdUTPxgRIUyJpEoUfTt9goQmnkSvk&callback=initMap"></script>
</script>
<script src="https://unpkg.com/@googlemaps/markerwithlabel/dist/index.min.js"></script>
<title>Find Your Dream Home!</title>
</head>
<body>
<div class="app__container">
<div class="nav__container">
<div class="nav__top">
<ul class="u-margin-left-xs nav__top--actions nav__top--actions--left">
<li class="u-margin-right-s nav__top--items nav__top--items--left">
<a href="" class="nav__top--links nav__top--links--left">Buy</a>
</li>
<li class="u-margin-right-s nav__top--items nav__top--items--left">
<a href="" class="nav__top--links nav__top--links--left">Rent</a>
</li>
<li class="u-margin-right-s nav__top--items nav__top--items--left">
<a href="" class="nav__top--links nav__top--links--left">Sale</a>
</li>
<li class="u-margin-right-s nav__top--items nav__top--items--left">
<a href="" class="nav__top--links nav__top--links--left">Home Loans</a>
</li>
<li class="u-margin-right-s nav__top--items nav__top--items--left">
<a href="" class="nav__top--links nav__top--links--left">Agent Finder</a>
</li>
</ul>
<div class="logo__container">
<div class="logo__container--home">
<img src="./src/img/logo__house.svg" alt="logo-homes" class="logo logo__homes">
</div>
<div class="logo__container--txt">
<img src="./src/img/logo__txt.svg" alt="logo-txt" class="logo logo__txt">
</div>
</div>
<ul class="u-margin-right-xs nav__top--actions nav__top--actions--right">
<li class="u-margin-right-s nav__top--items nav__top--items--right">
<a href="" class="nav__top--links nav__top--links--right">Manage Rentals</a>
</li>
<li class="u-margin-right-s nav__top--items nav__top--items--right">
<a href="" class="nav__top--links nav__top--links--right">Advertise</a>
</li>
<li class="u-margin-right-s nav__top--items nav__top--items--right">
<a href="" class="nav__top--links nav__top--links--right">Help</a>
</li>
<li class="nav__top--items nav__top--items--right">
<a href="" class="nav__top--links nav__top--links--right">Sign In</a>
</li>
</ul>
</div>
<div class="nav__bottom">
<div class="city__input--container u-margin-left-xs">
<form id = "city__input--form">
<input type="text" class = "city__input" id = 'city__input' name = 'city__input' placeholder =" Enter a U.S. city" autocomplete="off">
<img src="./src/img/pin-home.svg" alt="home-pin" class = "home-pin">
</form>
<div class="auto-complete__container">
<div class="black-border">
<div class="black-border--left hide"></div>
<div class="black-border--triangle hide"></div>
<div class="black-border--right hide"></div>
</div>
<ul class="auto-complete__list">
</ul>
</div>
</div>
<div class="nav__btn--container">
<div class="btn__marker btn__active btn__for-sale--container u-margin-right-xxs " data-marker = 0>
<button class="btn btn__for-sale btn__marker--active">
<img src="./src/img/red-active-circle.svg" alt="red active circle" class="active-circle">
For Sale
</button>
</div>
<!-- <div class="for-sale__container">
<div class="for-sale__container--top">
<div class="for-sale">
<label class = 'form-control form-control--for-sale' for = 'search-options--radio'>
<input value="homes-for-sale" type="radio" name = 'homes-for-sale-name' id ='search-options--radio' class = 'search-options--radio--active' value = 'for-sale'>
<div class="red-circle"></div>
<p class="p5">For Sale</p>
</label>
</div>
<div class="for-rent">
<label class = 'form-control' for = 'search-options--radio'>
<input value="homes-for-sale" type="radio" name = 'homes-for-sale-name' id ='search-options--radio' value = 'for-sale' class = 'search-options--radio'>
<div class="purple-circle"></div>
<p class="p5">For Rent</p>
</label>
</div>
<div class="sold">
<label class = 'form-control' for = 'search-options--radio'>
<input value="homes-for-sale" type="radio" name = 'homes-for-sale-name' id ='search-options--radio' value = 'for-sale' class = 'search-options--radio'>
<div class="yellow-circle"></div>
<p class="p5">Sold</p>
</label>
</div>
</div>
<div class="for-sale__container--bottom">
<div class="done__container">
<button class="btn__done">
Done
</button>
</div>
</div>
</div> -->
<div class="btn__marker btn__price--container u-margin-right-xxs" data-marker = 1>
<button class="btn btn__price">
Price
</button>
<!-- <div class="price__container">
<div class="price__container--top">
<p class="p3 price-range--header">Price Range</p>
<div class="price-range--inputs">
<label for="price-range--low" class="price-range--label price-range--label--low">
<input type="text" id = 'price-range--low' class = 'price-range--low dropdown__wide price-range--input' value = '100,000'>
</label>
<p class="dash">-</p>
<label for="price-range--high" class="price-range--label price-range--label--high">
<input type="text" id = 'price-range--high' class = 'price-range--high dropdown__wide price-range--input' value = '500,000'>
</label>
</div>
</div>
<ul class="prices p3">
<li class="price"><span>$</span>0<span>+</span></li>
<li class="price"><span>$</span>100,000<span>+</span></li>
<li class="price"><span>$</span>200,000<span>+</span></li>
<li class="price"><span>$</span>300,000<span>+</span></li>
<li class="price"><span>$</span>400,000<span>+</span></li>
<li class="price"><span>$</span>500,000<span>+</span></li>
<li class="price"><span>$</span>600,000<span>+</span></li>
</ul>
<div class="price__container--bottom">
<div class="done__container">
<button class="btn__done">
Done
</button>
</div>
</div>
</div> -->
</div>
<div class="btn__marker btn__bb--container u-margin-right-xxs" data-marker = 2>
<button class="btn btn__bb">
Beds & Bath
</button>
<!-- <div class="bed-bath__container">
<p class="p3 bed-text">Bedrooms</p>
<ul class="bed-amount p3">
<li class="bed-number bed-number--any">Any<span>+</span></li>
<li class="bed-number">1<span>+</span></li>
<li class="bed-number">2<span>+</span></li>
<li class="bed-number">3<span>+</span></li>
<li class="bed-number">4<span>+</span></li>
<li class="bed-number">5<span>+</span></li>
</ul>
<p class="p3 bath-text">Bathrooms</p>
<ul class="bath-amount p3">
<li class="bath-number bath-number--any">Any<span>+</span></li>
<li class="bath-number">1<span>+</span></li>
<li class="bath-number">1.5<span>+</span></li>
<li class="bath-number">2<span>+</span></li>
<li class="bath-number">3<span>+</span></li>
<li class="bath-number">4<span>+</span></li>
</ul>
<div class="bed-bath__container--bottom">
<div class="done__container">
<button class="btn__done">
Done
</button>
</div>
</div>
</div> -->
</div>
<div class="btn__marker btn__home-type--container u-margin-right-xxs" data-marker = 3>
<button class="btn btn__home-type">
Home Type
</button>
<!-- <div class="home-type__container">
<p class="p3 home-type--text">Home Type</p>
<div class="home-type--select-all--container">
<p class="checkmark">✓</p>
<p class="select-all--text">Deselect all</p>
</div>
<label for="home-type-house" class = 'home-type--label'>
<input type="checkbox" id = 'home-type' class="home-type--checkbox" name = 'home-type-house' >
<p class="p3 home-type-list-text">Houses</p>
</label>
<label for="home-type-town-homes" class = 'home-type--label'>
<input type="checkbox" id = 'home-type' class="home-type--checkbox" name = 'home-type-town-homes' checked>
<p class="p3 home-type-list-text">TownHomes</p>
</label>
<label for="home-type-multi-family" class = 'home-type--label'>
<input type="checkbox" id = 'home-type' class="home-type--checkbox" name = 'home-type-multi-family' >
<p class="p3 home-type-list-text">Multi-family</p>
</label>
<label for="home-type-condos" class = 'home-type--label'>
<input type="checkbox" id = 'home-type' class="home-type--checkbox" name = 'home-type-condos' >
<p class="p3 home-type-list-text">Condos/Co-ops</p>
</label>
<label for="home-type-lots" class = 'home-type--label'>
<input type="checkbox" id = 'home-type' class="home-type--checkbox" name = 'home-type-lots' >
<p class="p3 home-type-list-text">Lots/Land</p>
</label>
<label for="home-type-apartments" class = 'home-type--label'>
<input type="checkbox" id = 'home-type' class="home-type--checkbox" name = 'home-type-apartments' checked>
<p class="p3 home-type-list-text">Apartments</p>
</label>
<label for="home-type-manufactured" class = 'home-type--label'>
<input type="checkbox" id = 'home-type' class="home-type--checkbox" name = 'home-type-manufactured' checked>
<p class="p3 home-type-list-text">Manufactured</p>
</label>
<div class="home-type__container--bottom">
<div class="done__container">
<button class="btn__done">
Done
</button>
</div>
</div>
</div> -->
</div>
<div class="btn__marker btn__More--container u-margin-right-xxs" data-marker = 4>
<button class="btn btn__More">
More
</button>
</div>
<div class="btn__marker btn__save-search--container" data-marker = 5>
<button class="btn btn__save-search">
Save Search
</button>
</div>
</div>
</div>
</div>
<div class="app__body">
<div class="map__container">
<div class="test" id = "map"></div>
</div>
<div class="results__section--container">
<div class="results__section--title--container">
</div>
<div class="results__section--options--container">
<button class="btn btn__results btn__agent btn__results--active">
<span class="results__totals"></span>Agent Listings
</button>
<button class="btn btn__results btn__other btn__savedHomes">
<span>0 </span> Saved Homes
</button>
<div class="sort__container">
<p class="sort__text">Sort by:</p>
<div class="dropdown" data-dropdown-open = '0'><p>Homes for You</p>
<span class="arrow-down__container">
<img src="./src/img/arrow_down.svg" alt="arrow_down" class = "arrow-down">
</span>
<div class="border-glow"></div>
</div>
<div class = "sort__options">
<ul class = "sort__list">
<li class = "sort__item sort__high-to-low" data-sort = "High to Low" data-list-position = '1'>Price (High to Low)</li>
<li class = "sort__item sort__price" data-sort = "Low to High" data-list-position = '2'>Price (Low to High)</li>
<li class = "sort__item sort__newest" data-sort = "Home Type" data-list-position = '3'>Home Type</li>
<li class = "sort__item sort__bedrooms" data-sort = "Bedrooms" data-list-position = '4'>Bedrooms</li>
<li class = "sort__item sort__bathrooms" data-sort = "Bathrooms" data-list-position = '5'>Bathrooms</li>
<li class = "sort__item sort__square-feet" data-sort = "Square Feet" data-list-position = '6'>Square Feet</li>
</ul>
</div>
</div>
</div>
<div class="home__list">
<div class="pagination__container"></div>
</div>
</div>
</div>
</div>
</body>
</html>
here is some of the code with some of my checkboxes and radio buttons
<div class="home-type__container">
<p class="p3 home-type--text">Home Type</p>
<div class="home-type--select-all--container">
<p class="checkmark">✓</p>
<p class="select-all--text">Deselect all</p>
</div>
<label for="home-type-house" class = 'home-type--label'>
<input type="checkbox" id = 'home-type' class="home-type--checkbox" name = 'home-type-house' >
<p class="p3 home-type-list-text">Houses</p>
</label>
<label for="home-type-town-homes" class = 'home-type--label'>
<input type="checkbox" id = 'home-type' class="home-type--checkbox" name = 'home-type-town-homes' checked>
<p class="p3 home-type-list-text">TownHomes</p>
</label>
<label for="home-type-multi-family" class = 'home-type--label'>
<input type="checkbox" id = 'home-type' class="home-type--checkbox" name = 'home-type-multi-family' >
<p class="p3 home-type-list-text">Multi-family</p>
</label>
<label for="home-type-condos" class = 'home-type--label'>
<input type="checkbox" id = 'home-type' class="home-type--checkbox" name = 'home-type-condos' >
<p class="p3 home-type-list-text">Condos/Co-ops</p>
</label>
<label for="home-type-lots" class = 'home-type--label'>
<input type="checkbox" id = 'home-type' class="home-type--checkbox" name = 'home-type-lots' >
<p class="p3 home-type-list-text">Lots/Land</p>
</label>
<label for="home-type-apartments" class = 'home-type--label'>
<input type="checkbox" id = 'home-type' class="home-type--checkbox" name = 'home-type-apartments' checked>
<p class="p3 home-type-list-text">Apartments</p>
</label>
<label for="home-type-manufactured" class = 'home-type--label'>
<input type="checkbox" id = 'home-type' class="home-type--checkbox" name = 'home-type-manufactured' checked>
<p class="p3 home-type-list-text">Manufactured</p>
</label>
<div class="home-type__container--bottom">
<div class="done__container">
<button class="btn__done">
Done
</button>
</div>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire