获取在语义 UI 中检查的无线电值

Question

我试图在提交表单后获取复选框的值，但没有输出任何内容。网站上没有关于如何执行此操作的文档。

$(document).ready(function(){
$('.ui.radio.checkbox').checkbox();
$('#formOne').submit(e => {
let num = $('#radio').val();
console.log(num);
e.preventDefault();
});
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.js"></script>
<form class="ui form" id="formOne">
<div class="field" id="radio" >
<div class="ui radio checkbox">
<input type="radio" value="one" name="number">
<label>One</label>
</div>
<div class="ui radio checkbox">
<input type="radio" value="two" name="number">
<label>Two</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>

Answer 1

您需要找到选定的收音机，而不是收音机周围的div。

$(document).ready(function(){
$('.ui.radio.checkbox').checkbox();
$('#formOne').submit(e => {
let num = $('#radio').find('[name="number"]:checked').val();
console.log(num);
e.preventDefault();
});
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.js"></script>
<form class="ui form" id="formOne">
<div class="field" id="radio" >
<div class="ui radio checkbox">
<input type="radio" value="one" name="number">
<label>One</label>
</div>
<div class="ui radio checkbox">
<input type="radio" value="two" name="number">
<label>Two</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>

Answer 2

我相信你正在寻找这样的东西。

<script>
$(document).ready(function(){
$('.ui.radio.checkbox').checkbox();
$('#formOne').submit(e => {
var num = $("input[name='number']:checked").val();
console.log(num);
e.preventDefault();
});
});
</script>

你的HTML是：

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.js"></script>
<form class="ui form" id="formOne">
<div class="field" id="radio" >
<div class="ui radio checkbox">
<input type="radio" value="one" name="number">
<label>One</label>
</div>
<div class="ui radio checkbox">
<input type="radio" value="two" name="number">
<label>Two</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>

Answer 3

像这样使用：

<form class="ui form" id="formOne">
<div class="field" id="radio" >
<div class="ui radio checkbox">
<input type="radio" value="one" name="number">
<label>One</label>
</div>
<div class="ui radio checkbox">
<input type="radio" value="two" name="number">
<label>Two</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>

$(document).ready(function(){
$('.ui.radio.checkbox').checkbox();
$('#formOne').submit(e => {
let num = $('[name="number"]:checked').val();
console.log(num);
e.preventDefault();
});
});

现场演示