我想创建一个表单。该表格有 15 个问题。每个问题有 4 个答案。访问者可以为问题选择最少 1 个和最多 2 个答案。没关系，我来做。
如果访问者选择 1 个答案，我可以读取所选答案的值。如果访问者选择 2 个答案，我也可以读取值。但我需要知道哪个是第一个选择的，哪个是第二个选择的。因为;如果访问者选择第三个答案，则选择第一个答案；
- 我需要获取该值，并且我需要为第一个选择的答案获得 2 分
- 我需要获取该值，并且我需要为第二个选定的答案获得 1 分
在我的示例中，第三个答案的值为绿色，第一个答案的值为红色。所以我需要从第三个答案中获取“green-2”值，并从第一个答案中获取“red-1”值。
我怎样才能做到这一点？
我的代码在这里:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Personal Information</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<form>
<p><strong>How are you today?</strong></p>
<input type="checkbox" class="limited" id="q1a" value="red">Perfect<br>
<input type="checkbox" class="limited" id="q1b" value="yellow">Good<br>
<input type="checkbox" class="limited" id="q1c" value="green">Normal<br>
<input type="checkbox" class="limited" id="q1d" value="blue">Bad<br>
</form>
</body>
<script>
$(document).ready(function() {
var checkboxes = $('.limited');
checkboxes.on('click', function() {
var limit = 2;
var selected = checkboxes.filter(":checked").length;
if (selected > limit) {
alert("You can select maximum " + limit + " answer");
$(this).prop('checked', false);
}
});
});
</script>
</html>
最佳答案
拥有 Checkbox 的 HTML5 所有权。
代码:checked="true"
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Personal Information</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<form>
<p><strong>How are you today?</strong></p>
<input type="checkbox" class="limited" id="q1a"
checked="true" value="red">Perfect<br>
<input type="checkbox" class="limited" id="q1b" value="yellow">Good<br>
<input type="checkbox" class="limited" id="q1c" value="green">Normal<br>
<input type="checkbox" class="limited" id="q1d" value="blue">Bad<br>
</form>
</body>
<script>
$(document).ready(function() {
var checkboxes = $('.limited');
checkboxes.on('click', function() {
var limit = 2;
var selected = checkboxes.filter(":checked").length;
if (selected > limit) {
alert("You can select maximum " + limit + " answer");
$(this).prop('checked', false);
}
});
});
</script>
</html>图像中代码的更改是:
希望这些信息有用。再见:@locoalien
关于javascript - Jquery 首先选中复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34056322/