Tengo dos botones de radio y un selector de fecha y si hago clic o realizo cambios en cualquiera de esos tres, todos los valores de los elementos correspondientes deben actualizarse en una matriz. Lo he intentado y he fallado.
Esto es lo que he creado (jQuery):
if ($(["#submitDates"], ["input.usage"], ["input.scope"]).on("change")) { var fromDate = $("#from_date").val(); var toDate = $("#to_date").val(); var usage = $('input.usage').val(); var scope = $('input.scope').val(); var data = {}; data.dateRange = `${fromDate}->${toDate}`; data.scope = scope; data.usage = usage; console.clear(); console.log(data); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-md-2"> <input type="radio" class="usage" name="usages" value='email' checked> Email Usage </div> <div class="col-md-2"> <input type="radio" class="usage" name="usages" value='mail'> Mail Usage </div> <input type="radio" class="scope" name="scope" value="cm"> Current Month  <input type="radio" class="scope" name="scope" value="q"> This Quarter  <input type="radio" class="scope" name="scope" value="cy"> This Year  <input type="text" class="form-control" id='from_date' name="start" placeholder="MM/DD/YYYY" /> <div class="input-group-append"> <span class="input-group-text bg-info b-0 text-white">TO</span> </div> <input type="text" class="form-control" id='to_date' name="end" placeholder="MM/DD/YYYY" />  <button class='btn btn-sm btn-success btn-circle' id="submitDates" style="border-radius: 50%"><i class='bi bi-check-lg' style='font-size: 16px;'></i></button>Hay bastantes problemas en su código:
if , es inútilchange es incorrecta, no proporcionó el argumento de la función que vincula al controlador para que se ejecute cuando se activa el evento.data son un objeto, no una matriz, como dice su título/preguntaval() de los elementos .usage y .scope seleccionados únicamente .  no es una entidad de caracteres HTML válida. Supongo que te refieres a en cambio, pero incluso entonces esto es redundante.Con esos problemas solucionados, el código se vería así:
let $fromDate = $("#from_date") let $toDate = $("#to_date"); let $usage = $('input.usage'); let $scope = $('input.scope'); function handleFormUpdate() { var data = { dateRange: `${$fromDate.val()} -> ${$toDate.val()}`, scope: $scope.filter(':checked').val(), usage: $usage.filter(':checked').val() }; console.log(data); } $('#submitDates').on('click', handleFormUpdate); $('input.usage, input.scope').on("change", handleFormUpdate); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="col-md-2"> <input type="radio" class="usage" name="usages" value="email" checked> Email Usage </div> <div class="col-md-2"> <input type="radio" class="usage" name="usages" value="mail"> Mail Usage </div> <input type="radio" class="scope" name="scope" value="cm"> Current Month <input type="radio" class="scope" name="scope" value="q"> This Quarter <input type="radio" class="scope" name="scope" value="cy"> This Year <input type="text" class="form-control" id="from_date" name="start" placeholder="MM/DD/YYYY" /> <div class="input-group-append"> <span class="input-group-text bg-info b-0 text-white">TO</span> </div> <input type="text" class="form-control" id="to_date" name="end" placeholder="MM/DD/YYYY" /> <button class='btn btn-sm btn-success btn-circle' id="submitDates" style="border-radius: 50%"> <i class='bi bi-check-lg' style='font-size: 16px;'></i> Check </button>