我想创建一个表格。该表格有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>
最佳答案
拥有HTML5 for Checkbox的所有权。
代码：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