Javascript Jquery首先选中复选框_Javascript_Php_Jquery_Checkbox

Javascript Jquery首先选中复选框

javascript php jquery checkbox

Javascript Jquery首先选中复选框,javascript,php,jquery,checkbox,Javascript,Php,Jquery,Checkbox,我想创建一个表单。表格有15个问题。每个问题有4个答案。访客可以为一个问题选择至少1个答案，最多2个答案。没关系，我来做若访问者选择1个答案，我可以读取所选答案的值。如果访问者选择2个答案，我也可以读取值。但我需要知道哪个是第一个选择，哪个是第二个选择。因为,；如果访客选择第三个答案，则选择第一个答案我需要得到的值，我需要得到第一个选择的答案2分我需要得到的值，我需要得到第二个选择的答案1分在我的示例中，第三个答案的值为绿色，第一个答案的值为红色。所以我需要从第三个答案中得到“绿色-

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

若访问者选择1个答案，我可以读取所选答案的值。如果访问者选择2个答案，我也可以读取值。但我需要知道哪个是第一个选择，哪个是第二个选择。因为,；如果访客选择第三个答案，则选择第一个答案

我需要得到的值，我需要得到第一个选择的答案2分
我需要得到的值，我需要得到第二个选择的答案1分

在我的示例中，第三个答案的值为绿色，第一个答案的值为红色。所以我需要从第三个答案中得到“绿色-2”值，从第一个答案中得到“红色-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>


个人信息
你今天好吗？
完美的

好的

正常

坏的

$（文档）.ready（函数（）{
var复选框=$（'.limited'）；
复选框。在（'单击'，函数（）上）{
var限值=2；
所选变量=复选框。过滤器（“：选中”）。长度；
如果（选定>限制）{
警报（“您可以选择最大值+限制+回答”）；
$（this.prop（'checked'，false）；
}
});
});

您可以尝试类似的方法

$(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());
      }
    }
  });
});

$（文档）.ready（函数（）{
var复选框=$（'.limited'）；
复选框。在（'单击'，函数（）上）{
var checkedcheckBox=$（'.limited:checked'）。长度；
//检查是否选中了任何复选框
if（checkedcheckBox>=0&&checkedcheckBox numberside）{
$（this.val（prevVal_in+'-'+（numberside_in-1））；
}
});
$（this.val）（prevVal）；
警报（$（this.val（））；
}
}
});
});

拥有HTML5的所有权

代码：checked=“true”


个人信息
你今天好吗？
完美的

好的

正常

坏的

$（文档）.ready（函数（）{
var复选框=$（'.limited'）；
复选框。在（'单击'，函数（）上）{
var限值=2；
所选变量=复选框。过滤器（“：选中”）。长度；
如果（选定>限制）{
警报（“您可以选择最大值+限制+回答”）；
$（this.prop（'checked'，false）；
}
});
});

您可以这样说：

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


$（文档）.ready（函数（）{
var复选框=$（'.limited'）；
var复选框\单击\顺序=[]；
复选框。在（'单击'，函数（）上）{
var限值=2；
所选变量=复选框。过滤器（“：选中”）。长度；
如果（选定>限制）{
警报（“您可以选择最大值+限制+回答”）；
$（this.prop（'checked'，false）；
}否则{
if（$（this.prop（'checked'）&（$（this.val（））<0）复选框{
复选框\u单击\u order.push（$（this.val（））；
}否则{
复选框单击顺序.splice（复选框单击顺序.indexOf（$（this）.val（）），1）；
}
console.log（复选框单击顺序）；//这是选择的顺序
}
});
});


个人信息
你今天好吗？
完美的

好的

正常

坏的

$（文档）.ready（函数（）{
var复选框=$（'.limited'）；
复选框。在（'单击'，函数（）上）{
var限值=2；
所选变量=复选框。过滤器（“：选中”）。长度；
var计数=限制-已选择；
//更新代码
var first=复选框.filter（'.first'）.val（）；
var第二；
控制台信息（计数）；
if（$（this.prop（'checked'））{
开关（计数）{
案例1：
{
警报（“您可以选择最大值+限制+回答”）；
$（this.prop（'checked'，false）；
}
打破
案例1：
{       
//更新代码
复选框。removeClass（'first'）；
first=$（this.val（）
//更新代码
$（this.addClass（'first'）；
警报（第一个+“=2”）
}
打破
案例0：
{
second=$（this.val（）；
警报（第一次+“=2”，“第二次+”=1”）
}
打破
}
}
/*如果（选定>限制）{
警报（“您可以选择最大值+限制+回答”）；
$（this.prop（'checked'，false）；
}*/
});
});

我设置了一个变量

'count'

，这意味着允许单击的复选框项目的剩余数量

然后使用switch语句判断输入顺序，并将代码集成到我的

'case-1'

情况中

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

错了。如果您取消选中第一个选项并改为另一个选项，同时，具有

值并保留选中状态的选项应变为

，因为现在成为“第一次单击”（因为保留了该选项）.@RokoC.Buljan我已经从他自己的代码中删除了一些，因为这正是他/她可以开始的地方。如果OP专注于我所说的内容，他会注意到他试图做的是脑力劳动，既不方便用户。如果用户选中两个复选框，则会从

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