英文:
How to get value of radio button that is checked after clicking label
问题
我想出了一种通过连接for和id来获取单选按钮值的方法。但是除了使用for之外，我想不出其他方法。
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<div>
<input type="radio" name="group" value="1" id="id_1" checked>
<input type="radio" name="group" value="2" id="id_2">
<input type="radio" name="group" value="3" id="id_3">
<ul>
<li><label for="id_1">id_1</label></li>
<li><label for="id_2">id_2</label></li>
<li><label for="id_3">id_3</label></li>
</ul>
</div>
<script>
jQuery(function($) {
$('label').on('click', function(){
// Not working as intended
console.log(`Not working as intended: ${$(this).parents('div').find('input:checked').val()}`);
console.log($("input[name='group']:checked").val());
// It works.But I want to know how to not use for
console.log(`It works: ${$(`input#${$(this).attr('for')}`).val()}`);
});
});
</script>
注意：我只提供了代码部分的翻译，其他部分的内容被保留原样。
英文:
I came up with a way to get the value of the radio button by connecting for and id.
But I couldn't come up with a method other than using for.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<div>
<input type="radio" name="group" value="1" id="id_1" checked>
<input type="radio" name="group" value="2" id="id_2">
<input type="radio" name="group" value="3" id="id_3">
<ul>
<li><label for="id_1">id_1</label></li>
<li><label for="id_2">id_2</label></li>
<li><label for="id_3">id_3</label></li>
</ul>
</div>
<script>
jQuery(function($) {
$('label').on('click', function(){
// Not working as intended
console.log(`Not working as intended: ${$(this).parents('div').find('input:checked').val()}`);
console.log($("input[name='group']:checked").val());
// It works.But I want to know how to not use for
console.log(`It works: ${$(`input#${$(this).attr('for')}`).val()}`);
});
});
</script>
<!-- end snippet -->
答案1
得分: 1
你可以使用一个change处理程序来代替标签的click处理程序来处理单选按钮。
例如：
$('input[name="group"]').on('change', function() {
var value = $(this).val();
console.log(value);
});
英文:
You can use a change handler for the radio buttons instead of a click handler for the labels.
For example:
$('input[name="group"]').on('change', function() {
var value = $(this).val();
console.log(value);
});
答案2
得分: 1
发生的情况是您在标签上处理点击事件并在单选按钮实际更改之前报告之前。
不要绑定到标签上的点击事件，而是绑定一个事件处理程序到单选按钮自身的更改事件。
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<div>
<input type="radio" name="group" value="1" id="id_1" checked>
<input type="radio" name="group" value="2" id="id_2">
<input type="radio" name="group" value="3" id="id_3">
<ul>
<li><label for="id_1">id_1</label></li>
<li><label for="id_2">id_2</label></li>
<li><label for="id_3">id_3</label></li>
</ul>
</div>
<script>
jQuery(function($) {
$('input[type=radio]').on('change', function() {
let div = $(this).parents('div')[0];
console.log('the parent div is:', div);
let selected = div.querySelector('input[type=radio]:checked');
console.log('selected is:', selected);
});
});
</script>
这将在单选按钮的状态实际更改时触发事件处理程序，而不是在标签上的点击事件之前。
英文:
What's happening is you are handling the click on the label and reporting before the radio button selection actually changes.
Instead of binding to click on the label, bind an event handler to the change event on the radio buttons themselves.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<div>
<input type="radio" name="group" value="1" id="id_1" checked>
<input type="radio" name="group" value="2" id="id_2">
<input type="radio" name="group" value="3" id="id_3">
<ul>
<li><label for="id_1">id_1</label></li>
<li><label for="id_2">id_2</label></li>
<li><label for="id_3">id_3</label></li>
</ul>
</div>
<script>
jQuery(function($) {
$('input[type=radio]').on('change', function() {
let div = $(this).parents('div')[0];
console.log('the parent div is:', div);
let selected = div.querySelector('input[type=radio]:checked');
console.log('selected is:', selected);
});
});
</script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论