Wie kann ich wissen, welche Optionsschaltfläche über jQuery ausgewählt ist?

Question

Ich habe zwei Optionsfelder und möchte den Wert des ausgewählten Feldes ausgeben. Wie kann ich den Wert mit jQuery erhalten?

Ich kann sie alle auf diese Weise bekommen:

$("form :radio")

Woher weiß ich, welcher ausgewählt ist?

Answer 1

Desde diese Frage habe ich einen alternativen Weg gefunden, um auf die aktuell ausgewählte input wenn Sie sich innerhalb einer click Ereignis für das jeweilige Etikett. Der Grund dafür ist, dass das neu ausgewählte input wird erst aktualisiert, nachdem seine label Klick-Ereignis.

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>

Answer 2

Für diese Lösung ist jQuery nicht erforderlich.

const RADIO_NAME = "radioName";
const radios = Array.from(document.getElementsByName(RADIO_NAME));
const checkedRadio = radios.filter(e=>e.checked);

Dazu wird jQuery verwendet:

const radios = Array.from($(`[name=${RADIO_NAME}`));
const checkedRadio = radios.filter(e=>e.checked);

jQuery fügt eine zusätzliche Abstraktionsebene hinzu, die hier nicht erforderlich ist.

Sie könnten auch verwenden:

const radios = Array.from(document.querySelectorAll(`[name=${RADIO_NAME}`));
const checkedRadio = radios.filter(e=>e.checked)[0];

Aber getElementsByName ist einfach und klar genug.

Answer 3

Was ich tun musste, war C#-Code zu vereinfachen, das heißt, so viel wie möglich in der Front-End-JavaScript zu tun. Ich verwende einen Fieldset-Container, weil ich in DNN arbeite und dieser sein eigenes Formular hat. Ich kann also kein Formular hinzufügen.

Ich muss testen, welches der 3 Textfelder verwendet wird, und wenn ja, welche Art von Suche? Beginnt mit dem Wert, Enthält den Wert, Genaue Übereinstimmung des Wertes.

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>

Und mein JavaScript ist:

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

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

    }

Ich will damit nur sagen, dass jedes enthaltende Tag mit einer ID verwendet werden kann. Für DNNer ist das gut zu wissen. Das Endziel hier ist die Übergabe an den Mid-Level-Code, was benötigt wird, um eine Teilesuche in SQL Server zu starten.

Auf diese Weise muss ich nicht auch noch den viel komplizierteren früheren C#-Code kopieren. Die Schwerstarbeit wird genau hier erledigt.

Ich musste ein bisschen danach suchen und dann daran herumbasteln, um es zum Laufen zu bringen. Also für andere DNNers, hoffentlich ist dies einfach zu finden.

Answer 4

Sie benötigen einen Zugang mit dem :checked Selektor:

Prüfen Sie dieses Dokument:

• https://api.jquery.com/checked-selector/

ein Beispiel:

$('input[name=radioName]:checked', '#myForm').val()
$('#myForm input').on('change', function() {
    $('#val').text($('input[name=radioName]:checked', '#myForm').val());
});

#val {
  color: #EB0054;
  font-size: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>Radio value: <span id='val'><span></h3>
<form id="myForm">
  <input type="radio" name="radioName" value="a"> a <br>
  <input type="radio" name="radioName" value="b"> b <br>
  <input type="radio" name="radioName" value="c"> c <br>
</form>

Answer 5

Wie wäre es damit?

Verwendung von ändern und den Wert des Radiotyps abrufen, wird geprüft...

$('#my-radio-form').on('change', function() {
  console.log($('[type="radio"]:checked').val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form id="my-radio-form">
  <input type="radio" name="input-radio" value="a" />a
  <input type="radio" name="input-radio" value="b" />b
  <input type="radio" name="input-radio" value="c" />c
  <input type="radio" name="input-radio" value="d" />d
</form>