Question

我有10个带有以下值的复选框，的 7时 8:00 8:30 9:00 9:30 10:00 10:30 11:00 11:30 12:00

现在只考虑已经检查过7:00到9:00。当我检查11:30我应该得到所有值应该在9:00到11:30之间选择

所以在11:00检查后我的结果应该是

7时 8:00 8:30 9:00 9:30 10:00 10:30 11:00 11:30 12:00

到目前为止我的代码：

HTML代码

<input type="checkbox" name="timer" id="timer" value="8:00" />
<input type="checkbox" name="timer" id="timer" value="8:30" />
<input type="checkbox" name="timer" id="timer" value="9:00" />
<input type="checkbox" name="timer" id="timer" value="9:30" />
<input type="checkbox" name="timer" id="timer" value="10:00" />    
<input type="checkbox" name="timer" id="timer" value="10:30" />
<input type="checkbox" name="timer" id="timer" value="11:00" />
<input type="checkbox" name="timer" id="timer" value="11:30" />
<input type="checkbox" name="timer" id="timer" value="12:00" />
<input type="checkbox" name="timer" id="timer" value="12:30" />

Jquery Code是

var chkdtime = $('input[name="timecheckbox"]:checked').map(
    function() 
    {
        return this.value;
    }
).get(); 

var a=chkdtime.shift();
var b=chkdtime.pop();

Answer 1

我认为这段代码可以满足您的需求：

＆＃13;

var $checks = $(':checkbox[name=timer]').on('change', function() {
    
    var $checked = $checks.filter(':checked'),
        changedIndex = $checks.index(this),
        $start = $checked.eq(0),
        $end = $checked.eq($checked.length - 1),
        from = $checks.index($start),
        to = $checks.index($end);
    
    if (changedIndex < to) {
        $checks.slice(changedIndex).prop('checked', false);
        to = changedIndex;
    }
    
    $checks.slice(from, to).prop('checked', true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="timer" id="timer" value="8:00" checked /> 8:00 <br>
<input type="checkbox" name="timer" id="timer" value="8:30" checked /> 8:30 <br>
<input type="checkbox" name="timer" id="timer" value="9:00" checked /> 9:00 <br>
<input type="checkbox" name="timer" id="timer" value="9:30" checked /> 9:30 <br>
<input type="checkbox" name="timer" id="timer" value="10:00" /> 10:00 <br>
<input type="checkbox" name="timer" id="timer" value="10:30" /> 10:30 <br>
<input type="checkbox" name="timer" id="timer" value="11:00" /> 11:00 <br>
<input type="checkbox" name="timer" id="timer" value="11:30" /> 11:30 <br>
<input type="checkbox" name="timer" id="timer" value="12:00" /> 12:00 <br>
<input type="checkbox" name="timer" id="timer" value="12:30" /> 12:30 <br>

＆＃13;

关键思路是使用index()方法计算已选中复选框的索引，然后选中/取消选中两者之间的值。

Answer 2

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".autocheck").change(function() {
    if(this.checked) {
      value = this.value;
      $('.autocheck').each(function(){
        if (this.value == value){
          return false;
        } 
        this.checked = true;
      });
    }
  });
});
</script>
</head>
<body>

<form action="">
<input type="checkbox" class="autocheck"   value="8:00" />
<input type="checkbox" class="autocheck"   value="8:30" />
<input type="checkbox" class="autocheck"   value="9:00" />
<input type="checkbox" class="autocheck"   value="9:30" />
<input type="checkbox" class="autocheck"   value="10:00" />    
<input type="checkbox" class="autocheck"   value="10:30" />
<input type="checkbox" class="autocheck"   value="11:00" />
<input type="checkbox" class="autocheck"   value="11:30" />
<input type="checkbox" class="autocheck"   value="12:00" />
<input type="checkbox" class="autocheck"   value="12:30" />
</form>

</body>
</html>

BTW我不认为如果你想在提交表单后从服务器端访问值，每个复选框使用相同的名称是个好主意。

选中复选框以查看特定值

2 个答案: