Question

我想创建一个表单。表格有15个问题。每个问题都有4个答案。访问者可以为问题选择最少1个答案和最多2个答案。没关系，我这样做。

如果访问者选择1个答案，我可以读取所选答案的值。如果访问者选择2个答案，我也可以阅读值。但我需要知道哪个是首先选择的，哪个是第二个选择的。因为;如果访客选择第3个答案，则选择第1个答案;

我需要获得价值，我需要获得第一个选定答案的2分
我需要得到这个值，我需要得到1分才能获得第二个答案

在我的例子中，第3个答案的值为绿色，第1个答案的值为红色。所以我需要从第3个答案中获得“green-2”值并从第1个答案中获得“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>

Answer 1

你可以尝试这样的事情

$(document).ready(function() {
  var checkboxes = $('.limited');
  checkboxes.on('click', function() {
    var checkedcheckBox = $('.limited:checked').length;
    // check if any checkbox selected
    if( checkedcheckBox  >= 0 && checkedcheckBox <= 2){

      if($(this).is(':checked')){
        if(checkedcheckBox == 2){
          $('.limited:not(:checked)').prop('disabled', true);
        }
        $(this).val($(this).val()+'-'+ checkedcheckBox);
        alert($(this).val());
      }else{
        if(checkedcheckBox < 2){
          $('.limited:not(:checked)').prop('disabled', false);
        }
        var SplitIt = $(this).val().split('-');
        var prevVal = SplitIt[0];
        var numBeside = parseInt(SplitIt[1]);
        $('.limited:checked').each(function(){
          var SplitIt_in = $(this).val().split('-');
          var prevVal_in = SplitIt_in[0];
          var numBeside_in = parseInt(SplitIt_in[1]);
          if(numBeside_in > numBeside){
            $(this).val(prevVal_in+'-'+(numBeside_in -1));
          }
        });
        $(this).val(prevVal);
        alert($(this).val());
      }
    }
  });
});

Working Demo

Answer 2

拥有HTML5 for Checkbox。

代码：checked =＆＃34; true＆＃34;

＆＃13;

<!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>

＆＃13;

在图像中对代码的更改是：

希望这些信息有用。再见：@locoalien

Answer 3

你可以这样说：

<script>
  $(document).ready(function() {
      var checkboxes = $('.limited');
      var checkboxes_click_order = [];
      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);
          } else {
            if ($(this).prop('checked') && (checkboxes_click_order.indexOf($(this).val()) < 0)) {
              checkboxes_click_order.push($(this).val());
            } else {
              checkboxes_click_order.splice(checkboxes_click_order.indexOf($(this).val()), 1);
            }
            console.log(checkboxes_click_order); // This is the order of the selection
          }
      });
  });
</script>

Answer 4

<!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;
        var count =  limit - selected;
        //updated code
        var first= checkboxes.filter('.first').val();
        var second;
        console.info(count);
        if($(this).prop('checked')) {
            switch (count) {
                case -1:
                {
                    alert("You can select maximum " + limit + " answer");
                    $(this).prop('checked', false);
                }
                    break;
                case 1:
                {       
                        //updated code
                        checkboxes.removeClass('first');
                        first = $(this).val()
                        //updated code
                        $(this).addClass('first');
                    alert(first + " = 2")
                }
                    break;
                case 0:
                {
                    second = $(this).val();
                    alert(first + " = 2, " + second + " = 1")
                }
                    break;
            }
        }

        /*if (selected > limit) {
         alert("You can select maximum " + limit + " answer");
         $(this).prop('checked', false);
         }*/
    });
    });
</script>
</html>

我设置了一个变量'count'，这意味着可以点击剩余的复选框项目。

然后使用switch语句判断输入顺序并在'case -1'情况下集成代码。

但是当可点击的复选框数量变大时，它似乎会成为一大麻烦。

Jquery首先选中复选框

4 个答案: