0

Tengo mis RadioButton:

<div class="col-md-2 ml-auto">
    <div class="form-check">
        <br>
        <input class="form-check-input" type="radio" id-tipo="RadioDiario" checked >
        <label class="form-check-label" for="flexRadioDefault1">
            Diario
        </label>
    </div>
</div>

<div class="col-md-2 ml-auto">
    <div class="form-check">
        <br>
        <input class="form-check-input" type="radio" name="flexRadioDefault" id-tipo="RadioSemanal">
        <label class="form-check-label" for="flexRadioDefault1">
            Semanal
        </label>
    </div>
</div>

Y al dar clic en un boton para guardar la nueva información, entra a una function de js donde, creo una variable allRadio, y hago una function donde recolecto los radio que este seleccionados e ingreso a la variable ya declarada al inicio, mi intencion es tomar ese dato y ponerlo dentro de un arreglo, ya que este lo envio despues como json de ajax, entonces lo que requiero es que en la variable me mande como id-tipo pues ya sea RadioDiario o Semanal, como puedo hacerlo?

me sale este error:

Uncaught TypeError: Cannot read properties of undefined (reading 'val')

var allRadio;
$('input[type=radio]:checked').each(function () {
    allRadio = ($(this).attr('id-tipo')).val();
});

var unidad = {
    _id: id,       
    _radio: allRadio

}

2 respuestas 2

0

Para coger el valor del atributo id-tipo tienes que hacerlo de la siguiente manera

var allRadio;
$('input[type=radio]:checked').each(function () {
    allRadio = $(this).attr('id-tipo');
});
0

si no lo he entendido mal quieres poder marcar ambos radios, si es en ese caso te recomiendo usar <input type="checkbox"> en caso de que lo que quieres sea solo poder seleccionar uno de los dos radios entonces tu codigo esta mal formulado, ambos radios deben de tener el mismo name para que cuando marques uno se desmarque el otro y un value si quieres recojer el valor que tenga el seleccionado, te dejo aquí un pequeño ejemplo.

function loadEvents() {
  const btn = document.getElementById("btn");
  btn.addEventListener("click", showChecked);
}

function showChecked() {
  const radioChecked = document.querySelector('input[name="frequency"]:checked').value;
  alert(`Has marcado ${radioChecked}`);
}

// Esta linea es solo para cargar los eventos una vez haya cargado el DOM de la pagina
addEventListener("DOMContentLoaded", loadEvents);
<div>
  <input id="daily" type="radio" name="frequency" value="diario" checked>
  <label for="daily"> Diario </label>
</div>


<div>
  <input id="weekly" type="radio" name="frequency" value="semanal">
  <label for="weekly">Semanal</label>
</div>

<button id="btn">Pillar marcado</button>

En caso de lo que quieres es poder marcar los dos te dejo aquí un ejemplo de como seria de una forma sencilla con <input type="checkbox">. En el ejemplo puedes ver como a ambos se le puede poner como name frequency[] esto es para cuando se envían los datos a un servidor php estos llegan en forma de array. Tambien puedes ver que a diferencia del primer ejemplo aquí se usa document.querySelectorAll el cual devuelve un array por lo cual recojas todos los elementos que cumplan con el parámetro pasado.

function loadEvents() {
    const btn = document.getElementById("btn");
    btn.addEventListener("click", showChecked);
}

function showChecked() {
    const radioChecked = document.querySelectorAll('input[name="frequency[]"]:checked');
    let checked = Array.from(radioChecked).map(e => e.value);
    alert(`Has marcado ${checked}`);
}

// Esta linea es solo para cargar los eventos una vez haya cargado el DOM de la pagina
addEventListener("DOMContentLoaded", loadEvents);
<div>
  <input id="daily" type="checkbox" name="frequency[]" value="diario" checked>
  <label for="daily"> Diario </label>
</div>


<div>
  <input id="weekly" type="checkbox" name="frequency[]" value="semanal">
  <label for="weekly">Semanal</label>
</div>

<button id="btn">Pillar marcado</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.