JQuery Get Label Wert für gewählten Radio

Question

ich einige HTML haben, die wie folgt aussieht:

<label> 
<input type="radio" onchange="routesearch2()" name="LargestMeeting" value="0" id="LargestMeeting_0" /> 
Less Than 5,000 sqft (<span id="lm1" class="detect lm1"></span>)</label> 
<br /> 
    <label> 
<input type="radio" onchange="routesearch2()" name="LargestMeeting" value="5000" id="LargestMeeting_1" /> 
5,000 or more sqft (<span id="lm2" class="detect lm2"></span>)</label> 
    <br /> 
    <label> 
    <input type="radio" onchange="routesearch2()" name="LargestMeeting" value="10000" id="LargestMeeting_2" /> 
10,000 or more sqft (<span id="lm3" class="detect lm3"></span>)</label> 
    <br /> 
<label> 
<input type="radio" onchange="routesearch2()" name="LargestMeeting" value="20000" id="LargestMeeting_3" /> 
20,000 or more sqft (<span id="lm4" class="detect lm4"></span>)</label> 
<br /> 
<label> 
<input type="radio" onchange="routesearch2()" name="LargestMeeting" value="30000" id="LargestMeeting_4" /> 
    30,000 or more sqft (<span id="lm5" class="detect lm5"></span>)</label> 

und ich möchte (innerhalb einer Funktion) greifen den Wert des Etiketts für den geprüften Radiobox. Ich dachte, es würde in etwa so aussehen:

Was fehlt mir? Es kommt leer heraus.

Answer 1

Sie sind ganz in der Nähe. Das Problem besteht darin, wie die Selektoren verschachtelt sind. Wenn Sie das überprüfte input auswählen und dessen Eltern auswählen, können Sie den gewünschten Text einfach ausgeben.

dieses Beispiel Siehe:

function routesearch2() { 
 
    var myLabel = $('input[name=LargestMeeting]:checked').parent().text(); 
 
    alert(myLabel); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
<input type="radio" onchange="routesearch2()" name="LargestMeeting" value="0" id="LargestMeeting_0" /> 
 
Less Than 5,000 sqft (<span id="lm1" class="detect lm1"></span>)</label> 
 
<br /> 
 
<label> 
 
<input type="radio" onchange="routesearch2()" name="LargestMeeting" value="5000" id="LargestMeeting_1" /> 
 
5,000 or more sqft (<span id="lm2" class="detect lm2"></span>)</label> 
 
<br /> 
 
<label> 
 
    <input type="radio" onchange="routesearch2()" name="LargestMeeting" value="10000" id="LargestMeeting_2" /> 
 
10,000 or more sqft (<span id="lm3" class="detect lm3"></span>)</label> 
 
<br /> 
 
<label> 
 
<input type="radio" onchange="routesearch2()" name="LargestMeeting" value="20000" id="LargestMeeting_3" /> 
 
20,000 or more sqft (<span id="lm4" class="detect lm4"></span>)</label> 
 
<br /> 
 
<label> 
 
<input type="radio" onchange="routesearch2()" name="LargestMeeting" value="30000" id="LargestMeeting_4" /> 
 
    30,000 or more sqft (<span id="lm5" class="detect lm5"></span>)</label>

Answer 2

Verwendung dieses

$("input[name=LargestMeeting]:checked").parent().text() 

und weißen Flächen säubern Sie

$.trim($("input[name=LargestMeeting]:checked").parent().text()) 

Answer 3

Da input Tag ist Schließung selbst hinzufügen können, werden Sie den Text nicht erhalten Sie wollen. Sie müssen zuerst die überprüfte Eingabe auswählen, dann zu übergeordneten Elementen wechseln, dann den Inhalt unter text() abrufen und trim() aufrufen, um den Text zuzuschneiden.

var mylabel = $("label input[name=LargestMeeting]:checked").parent().text().trim(); 

$('input[type=radio]').on('click', function() { 
 
    var mylabel = $("label input[name=LargestMeeting]:checked").parent().text().trim(); 
 
    console.log(mylabel); 
 
}); 
 

 

 
//place holder 
 
function routesearch2() {};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    <input type="radio" onchange="routesearch2()" name="LargestMeeting" value="0" id="LargestMeeting_0" /> Less Than 5,000 sqft (<span id="lm1" class="detect lm1"></span>)</label> 
 
<br /> 
 
<label> 
 
    <input type="radio" onchange="routesearch2()" name="LargestMeeting" value="5000" id="LargestMeeting_1" /> 5,000 or more sqft (<span id="lm2" class="detect lm2"></span>)</label> 
 
<br /> 
 
<label> 
 
    <input type="radio" onchange="routesearch2()" name="LargestMeeting" value="10000" id="LargestMeeting_2" /> 10,000 or more sqft (<span id="lm3" class="detect lm3"></span>)</label> 
 
<br /> 
 
<label> 
 
    <input type="radio" onchange="routesearch2()" name="LargestMeeting" value="20000" id="LargestMeeting_3" /> 20,000 or more sqft (<span id="lm4" class="detect lm4"></span>)</label> 
 
<br /> 
 
<label> 
 
    <input type="radio" onchange="routesearch2()" name="LargestMeeting" value="30000" id="LargestMeeting_4" /> 30,000 or more sqft (<span id="lm5" class="detect lm5"></span>)</label>

Answer 4

Mit Javascript:

var meetings = document.getElementsByName('LargestMeeting'); 
for(var i = 0; i < meetings.length; i++){ 
    if(meetings[i].checked){ 
     selected_value = meetings[i].value; 
    } 
}