$( '输入[类型=复选框]')。改变(()的函数

时间:2012-06-27 19:58:51

标签: javascript jquery

目前我有以下脚本检查复选框值是否已更改,但在我尝试使用时它不起作用!

<script>
    $('input[type=checkbox]').change(function () {
        if ($(this).is(':checked')) {
            if ($(this).prev().attr('checked') && $(this).val() != $(this).prev().val()) {
                alert("previous checkbox has same value");
            }
        }
    });​
 </script>

 <input name="" type="checkbox" value="here"/>(if this was checked)
 <input name="" type="checkbox" value="here"/>(then this)
 <input name="" type="checkbox" value="there"/>(would not allow prompt alert) 
 <input name="" type="checkbox" value="here"/>(would allow)​

你可以看到它在这里工作但是当我尝试使用它时它不起作用 http://jsfiddle.net/rajaadil/LgxPn/7

我们的想法是在选中的复选框值与之前检查的复选框值不同时发出警告!

目前我的复选框看起来像

<input type="checkbox" name="checkbox[]" onClick="getVal();setChecks(this)" value="`key`=<?php echo $rspatient['key']?>" class="chk" id="chk<?php echo $a++?>"/>

我认为函数('input[type=checkbox]').change(function()会得到这些但我错了吗?

4 个答案:

答案 0 :(得分:1)

要选择上一个选中的兄弟复选框,请使用此选项:

$(this).prevAll(":checked:first")

我希望使用:last,但:first是有效的。这对我来说是违反直觉的,与:first:last通常的工作方式不一致,但我在几个浏览器中对其进行了测试,结果是一致的。

$(':checkbox').change(function() {
    if (this.checked) {
        var lastChecked = $(this).prevAll(":checked:first");
        if (this.value == lastChecked.val()) {
            alert("previous checked box has same value");
        }
    }
});

演示: http://jsfiddle.net/LgxPn/15/


修改:如果通过“之前选中的复选框”表示用户点击的最后一个框,那么您需要自己跟踪。没有内置的jQuery方法可以告诉你有关点击历史的任何信息。

当用户首先检查几个盒子,然后检查并立即取消选中一个盒子时会发生什么?是否应该使用下一个最近选中的复选框?如果是这样,那么您需要跟踪所有选中的框以及它们被点击的顺序。以下是您可以跟踪复选框的方法:

var lastChecked = [];
$(':checkbox').change(function() {
    if (this.checked) {
        if (lastChecked.length && this.value == lastChecked[0].value) {
            alert("the last box you checked has the same value");
        }
        lastChecked.unshift(this);
    }
    else {
        lastChecked.splice(lastChecked.indexOf(this), 1);
    }
});​

演示: http://jsfiddle.net/LgxPn/21/

答案 1 :(得分:0)

只是一个猜测(有一些更好的语法),试试这个:

<script type="text/javascript">
$(function() {
  $('input:checkbox').change(function() {
    if($(this).is(':checked'))
    {
       if ($(this).prev().prop('checked') && $(this).val() != $(this).prev().val()) { 
         alert("previous checkbox has same value");
       }
    }
  });​
});

</script>

答案 2 :(得分:0)

您的提醒讯息与if语句不符。您检查值是否为!=,但警报是否相等。我假设警报是你要检查的情况。尝试:

$(':checkbox').change(function() {
  var $this = $(this);
  var $prev = $this.prev();
  if($this.is(':checked')) {
    if($prev.is(':checked') && $this.val() === $prev.val()) {
      alert('Previous checkbox has same value');
    }
  }
});​

正如其他人所提到的那样,请确保这一切都在$(document).ready()区块内

答案 3 :(得分:0)

这似乎对我有用:

$(function() {
    $('input[type=checkbox]').click(function() {
        if ($(this).is(':checked')) {
            if ($(this).prev().prop('checked')) {
                if ($(this).val() != $(this).prev('input[type=checkbox]').val()) {
                    alert("previous checkbox has same value");
                }
            }
        }
    });
});​

这是一个JSFiddle:http://jsfiddle.net/gy8EQ/