[javascript] ¿Cómo puedo saber qué botón de selección se selecciona a través de jQuery?


Answers

Utilizar esta..

$("#myform input[type='radio']:checked").val();
Question

Tengo dos botones de opción y deseo publicar el valor del seleccionado. ¿Cómo puedo obtener el valor con jQuery?

Puedo obtener todos ellos así:

$("form :radio")

¿Cómo sé cuál se selecciona?




En un botón de <h:selectOneRadio> generado por JSF (usando la etiqueta <h:selectOneRadio> ), puede hacer esto:

radiobuttonvalue = jQuery("input[name='form_id\:radiobutton_id']:checked").val();

donde selectOneRadio ID es radiobutton_id y el formulario ID es form_id .

Asegúrese de utilizar el nombre en su lugar id , como se indica, porque jQuery utiliza este atributo (el nombre se genera automáticamente por JSF se asemeja a la ID de control).




Para recuperar todos los valores de botones de radio en la matriz de JavaScript, use el siguiente código jQuery:

var values = jQuery('input:checkbox:checked.group1').map(function () {
    return this.value;
}).get();



Lo que tenía que hacer era simplificar el código C #, que es hacer todo lo posible en el JavaScript de la interfaz. Estoy usando un contenedor fieldset porque estoy trabajando en DNN y tiene su propia forma. Entonces no puedo agregar un formulario.

Necesito probar qué cuadro de texto de 3 está siendo utilizado y, si lo está, ¿cuál es el tipo de búsqueda? Comienza con el valor, Contiene el valor, Coincidencia exacta del valor.

HTML:

<fieldset id="fsPartNum" class="form-inline">
<div class="form-group">
    <label for="txtPartNumber">Part Number:</label>
    <input type="text" id="txtPartNumber" class="input-margin-pn" />
</div>
<div class="form-group">
    <label for="radPNStartsWith">Starts With: </label>
    <input type="radio" id="radPNStartsWith" name="partNumber" checked  value="StartsWith"/>
</div>
<div class="form-group">
    <label for="radPNContains">Contains: </label>
    <input type="radio" id="radPNContains" name="partNumber" value="Contains" />
</div>
<div class="form-group">
    <label for="radPNExactMatch">Exact Match: </label>
    <input type="radio" id="radPNExactMatch" name="partNumber" value="ExactMatch" />
</div>

Y mi JavaScript es:

        alert($('input[name=partNumber]:checked', '#fsPartNum').val()); 
    if(txtPartNumber.val() !== ''){
        message = 'Customer Part Number';
    }
    else if(txtCommercialPartNumber.val() !== ''){

    }
    else if(txtDescription.val() !== ''){

    }

Solo digo que se puede usar cualquier etiqueta que contenga una ID. Para los DNN, es bueno saberlo. El objetivo final aquí es pasar al código de nivel medio lo que se necesita para iniciar una búsqueda de partes en SQL Server.

De esta forma, no tengo que copiar el código anterior mucho más complicado de C # también. El trabajo pesado se está haciendo aquí mismo.

Tuve que mirar un poco para esto y luego jugar con eso para que funcione. Entonces, para otros DNN, con suerte es fácil de encontrar.




Obtener todas las radios:

var radios = jQuery("input[type='radio']");

Filtrar para obtener el que está marcado

radios.filter(":checked")



Así es como escribiría el formulario y manejaría la obtención de la radio marcada.

Usando un formulario llamado myForm:

<form id='myForm'>
    <input type='radio' name='radio1' class='radio1' value='val1' />
    <input type='radio' name='radio1' class='radio1' value='val2' />
    ...
</form>

Obtenga el valor del formulario:

$('#myForm .radio1:checked').val();

Si no publica el formulario, lo simplificaría aún más al usar:

<input type='radio' class='radio1' value='val1' />
<input type='radio' class='radio1' value='val2' />

Luego, obtener el valor verificado se convierte en:

    $('.radio1:checked').val();

Tener un nombre de clase en la entrada me permite diseñar fácilmente las entradas ...




Utilizar esta:

value = $('input[name=button-name]:checked').val();



Esto funciona bien

$('input[type="radio"][class="className"]:checked').val()

Demo de trabajo

El selector :checked funciona para checkboxes de checkboxes , radio buttons checkboxes y elementos seleccionados. Solo para elementos seleccionados, use el selector :selected .

API para :checked Selector




Si tiene múltiples botones de radio en forma individual, entonces

var myRadio1 = $('input[name=radioButtonName1]');
var value1 = myRadio1.filter(':checked').val();

var myRadio2 = $('input[name=radioButtonName2]');
var value2 = myRadio2.filter(':checked').val();

Esto es trabajo para mí.




Otra opción es:

$('input[name=radioName]:radio:checked').val()



DEMO : https://jsfiddle.net/ipsjolly/xygr065w/

	$(function(){
	    $("#submit").click(function(){      
	        alert($('input:radio:checked').val());
	    });
	 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
       <tr>
         <td>Sales Promotion</td>
         <td><input type="radio" name="q12_3" value="1">1</td>
         <td><input type="radio" name="q12_3" value="2">2</td>
         <td><input type="radio" name="q12_3" value="3">3</td>
         <td><input type="radio" name="q12_3" value="4">4</td>
         <td><input type="radio" name="q12_3" value="5">5</td>
      </tr>
    </table>
<button id="submit">submit</button>




 $(".Stat").click(function () {
     var rdbVal1 = $("input[name$=S]:checked").val();
 }



A partir de esta pregunta , se me ocurrió una forma alternativa de acceder a la input seleccionada actualmente cuando se encuentra dentro de un evento de click para su etiqueta respectiva. La razón es porque la input recién seleccionada no se actualiza hasta después del evento de clic de la label .

TL; DR

$('label').click(function() {
  var selected = $('#' + $(this).attr('for')).val();

  ...
});

$(function() {
  // this outright does not work properly as explained above
  $('#reported label').click(function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="click event"]').html(query + ' at ' + time);
  });

  // this works, but fails to update when same label is clicked consecutively
  $('#reported input[name="filter"]').on('change', function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    $('.query[data-method="change event"]').html(query + ' at ' + time);
  });

  // here is the solution I came up with
  $('#reported label').click(function() {
    var query = $('#' + $(this).attr('for')).val();
    var time = (new Date()).toString();

    $('.query[data-method="click event with this"]').html(query + ' at ' + time);
  });
});
input[name="filter"] {
  display: none;
}
#reported label {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.query {
  padding: 5px;
  margin: 5px;
}
.query:before {
  content: "on " attr(data-method)": ";
}
[data-method="click event"] {
  color: red;
}
[data-method="change event"] {
  color: #cc0;
}
[data-method="click event with this"] {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
  <input type="radio" name="filter" id="question" value="questions" checked="checked">
  <label for="question">Questions</label>

  <input type="radio" name="filter" id="answer" value="answers">
  <label for="answer">Answers</label>

  <input type="radio" name="filter" id="comment" value="comments">
  <label for="comment">Comments</label>

  <input type="radio" name="filter" id="user" value="users">
  <label for="user">Users</label>

  <input type="radio" name="filter" id="company" value="companies">
  <label for="company">Companies</label>

  <div class="query" data-method="click event"></div>
  <div class="query" data-method="change event"></div>
  <div class="query" data-method="click event with this"></div>
</form>




Esto debería funcionar:

$("input[name='radioName']:checked").val()

Tenga en cuenta el "uso" en la entrada: marcado y no "como la solución de Peter J"




Related