Necesito configurar el botón de radio en el valor que paso a través de url.
function filterCategory(ads) { let categories = Array.from(new Set(ads.map(ann => ann.category))); let rowCategoryRadio = document.querySelector('#row-category-radio'); categories.forEach((cat, i) => { let input = document.createElement('div'); input.classList.add('form-check'); input.innerHTML = ` <input class="form-check-input filter-category" type="radio" name="category-filter" id="flexRadioDefault${i}" data-filter="${cat}"> <label class="form-check-label" for="flexRadioDefault${i}"> ${cat} </label> ` rowCategoryRadio.appendChild(input); }) } <div class="row" id="row-category-radio"> <div class="form-check"> <input class="form-check-input filter-category" type="radio" name="category-filter" id="flexRadioDefault1" data-filter="all" checked> <label class="form-check-label" for="flexRadioDefault1"> All categories </label> </div> </div>Para establecer el botón de opción en el valor que paso, escribí el siguiente código, solo obtengo el valor de nulo seleccionado
let url_string = window.location.href; let url2 = new URL(url_string); let name_url = url2.searchParams.get("name"); let radios = document.querySelector('.filter-category'); let selected = radios.querySelector(`[data-filter="${name_url}"]`); selected.checked = true;; console.log(selected);¿Puede alguien amablemente ayudarme?
radios.querySelector() busca elementos anidados dentro de radios que coincidan con el selector. Pero el atributo data-filter está en el propio elemento de radios , no en un elemento anidado.
Desea ponerlos en un solo selector de consulta.
let selected = document.querySelector(`.filter-category[data-filter="${name_url}"]`)