1
我的JavaScript代碼：如何檢查單選按鈕時如何獲取單選按鈕的文本？
$('input:radio[class=radio]').click(function(e){
var txt = $(e.target).text();
console.log(txt);
});
演示：https://jsfiddle.net/oscar11/m7by6zcw/9/
我怎樣才能解決這個問題？
A
回答
3
文本不是輸入類型單選按鈕的有效屬性。
如果您檢查內容，您將看到文本呈現爲輸入元素的兄弟。您可以遍歷父標籤元素，然後在其中獲取文本。
也沒有必要在這裏使用屬性eqaul選擇器（[class=radio]），爲無元件具有在它類無線電：
$('input:radio').click(function(e){
var txt = $(this).parent().text();
console.log(txt);
});
+1
還要注意在選擇器中使用'[class = radio]'，並且沒有任何單選按鈕具有該類。 –
+1
@evolutionxbox'input：radio'無效嗎？ – guradio
+0
@guradio我做了一個假設，因爲它不是一個有效的CSS選擇器，它不會工作。我立場糾正。 – evolutionxbox
0
參見下面的代碼片斷
$('input:radio[class=radio]').click(function(e){
var txt = e.target.labels["0"].innerText;
console.log(txt);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>England</strong></li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="england" class="radio"> Chelsea
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="england" class="radio"> Mu
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="england" class="radio"> Arsenal
</label>
</div>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>Spain</strong></li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="spain" class="radio"> Madrid
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="spain" class="radio"> Barcelona
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="spain" class="radio"> Atletico
</label>
</div>
</li>
</ul>
</div>
-1
我只是嘗試你的代碼，我發現你的選擇我錯了，請試試這個： jsfiddle
$('input:radio').click(function(e){
var txt = $(e.target).parent().text();
alert(txt);
});
1
在你的事件處理程序，您可以使用Node.nextSibling比訪問其nodeValue：
$('input:radio[class=radio]').on('click', function() {
var txt = this.nextSibling.nodeValue.trim();
console.log(txt);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>England</strong></li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="england" class="radio"> Chelsea
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="england" class="radio"> Mu
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="england" class="radio"> Arsenal
</label>
</div>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>Spain</strong></li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="spain" class="radio"> Madrid
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="spain" class="radio"> Barcelona
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="spain" class="radio"> Atletico
</label>
</div>
</li>
</ul>
</div>+0
也許你可以幫忙我。看看這個：https://stackoverflow.com/questions/46824649/how-can-i-unify-text-that-take-from-multiple-group-radio-button-and-multiple-group –
0
$('input:radio').click(function(e){
var txt = $(e.target).parent().text();
alert(txt);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frm">
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>England</strong></li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="england"> Chelsea
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="england"> Mu
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="england"> Arsenal
</label>
</div>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>Spain</strong></li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="spain"> Madrid
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="spain"> Barcelona
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="spain"> Atletico
</label>
</div>
</li>
</ul>
</div>
</form>
1
您可以通過選擇輸入
$('input:radio').click(function() {
alert($(this).parent().text());
});
的父標籤不必與單選按鈕無線電類實現這個目標。所以它也不會觸發點擊事件。您需要將其刪除。
更新小提琴here
0
嘗試下面的例子，
HTML
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>England</strong></li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="england" value="Chelsea"> Chelsea
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="england" value="Mu"> Mu
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="england" value="Arsenal"> Arsenal
</label>
</div>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>Spain</strong></li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="spain" value="Madrid"> Madrid
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="spain" value="Barcelona"> Barcelona
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="radio" name="spain" value="Atletico"> Atletico
</label>
</div>
</li>
</ul>
</div>
JQUERY
<script type="text/javascript">
$("input[type=radio]").on("click",function(e){
alert($(this).val());
})
</script>
0
我會申請一個簡單的解決方案，這是中添加 「價值」您的單選按鈕：
如：
<label>
<input type="radio" name="england" class="radio" value="Mu"> Mu
</label>
讓您能夠完美地訪問該值：
$(e.target).val();
相關問題
- 1. Flash單選按鈕：如何獲取選定的單選按鈕？
- 2. 如何檢查單選按鈕上的單選按鈕
- 3. WatiN：如何檢查單選按鈕組中的單選按鈕
- 4. 如何檢查單選按鈕的值
- 5. 如何檢查單擊按鈕時是否選中單選按鈕？
- 6. 如何獲取單選按鈕的值？
- 7. 如何檢查單選按鈕
- 8. 單擊按鈕時獲取所選單選按鈕的編號
- 9. 獲取先前檢查單選按鈕
- 10. 如何檢查是否在單選按鈕列表單選按鈕被選中
- 11. 如何獲取已檢查的單選按鈕的值，jQuery的
- 12. 根據文本檢查單選按鈕
- 13. 單選按鈕取消選中/檢查
- 14. Android：單擊按鈕時如何從按鈕中獲取文本？
- 15. 如何獲取Android中檢查的正確單選按鈕？
- 16. 如何啓用按鈕檢查單選按鈕
- 17. 如何編程檢查引導按鈕組（單選）按鈕
- 18. 如何居中文本單選按鈕
- 19. 檢查並更改單選按鈕組中的單選按鈕
- 20. jQuery的檢查下TD單選按鈕組單選按鈕
- 21. 如何檢查相對於文本框的單選按鈕？
- 22. 如果在加載時檢查單選按鈕，隱藏按鈕
- 23. 檢查單選按鈕（笨）
- 24. 單選按鈕，檢查值
- 25. 從檢查單選按鈕
- 26. Jquery單選按鈕檢查
- 27. 檢查單選按鈕
- 28. 單選按鈕檢查
- 29. 單選按鈕檢查
- 30. WPF單選按鈕檢查
你的榜樣不包含JS。 – evolutionxbox
@evolutionxbox，我已經更新它 –
使用'<>'爲片段 – guradio