JQuery的獲取標籤值的選上的無線電

Question

我有一些HTML，看起來像這樣：

<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> 

，我想（在一個函數中）搶標籤的檢查單選框的值。我認爲它看起來像這樣：

var mylabel = $("label[for='input[name=LargestMeeting]:checked']").text(); 
alert(mylabel) 

我錯過了什麼？它是空白的。

Answer 1

你非常接近。問題在於你嵌套選擇器的方式。如果您抓住選中的input並選擇其父項，則可以輕鬆輸出您想要的文本。

見這個例子：

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

使用本

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

和清理白色空間，您可以添加

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

Answer 3

由於input標籤是自我封閉，你不會得到你想要的文字。您需要先選擇已檢查的輸入，然後上到父級，然後通過text()獲取內容並致電trim()修剪文本。

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

使用Javascript：

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