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