Question

我有以下代码正在运行，我想知道这是否可以简化更多。

<form name="cbform">
<input type="checkbox" value="1" name="one" id="one" /> one<br />
<input type="checkbox" value="1" name="two" id="two" /> two
</form>

<script>
$('#one, #two').click(function(event) {
    var checked = $(this).is(':checked');
    if (checked) {
        $('#one').attr('checked', true);
        $('#two').attr('checked', true);
    }
    else {
        $('#one').attr('checked', false);
        $('#two').attr('checked', false);
    }
});
</script>

它基本上是一个相互依赖的两个复选框。 Jquery用于检查和取消选中它们。

此致

Answer 1

压缩大多数工作DEMO http://jsfiddle.net/U5GfF/ 或 http://jsfiddle.net/U5GfF/3/

这是您可以为您的代码获得的最少行版本：即

this.checked将返回true和false，其余点击事件prop会相应地设置checked属性。 :)

希望这有帮助，

<强>码

$("#one, #two").click(function() {
    $("input").prop('checked', this.checked);
});

或

$("#one, #two").click(function() { $("#one, #two").prop('checked', this.checked); });

或

$("#one, #two").on('click', function() { $("#one, #two").prop('checked', this.checked); });

Answer 2

您可以使用prop()方法：

$('#one, #two').click(function(event) { // or $("input:checkbox")
    if ($(this).is(':checked')) {
        $('#one, #two').prop('checked', true); // or $("input:checkbox")
    } else {
        $('#one, #two').prop('checked', false);
    }
});

Demo

Answer 3

试试这个，只需2行： - ）

现场演示：

http://jsfiddle.net/TnpNV/15/

对于jQuery现代版本：

$('#one, #two').on('click', function(e) {
  var prop = ($(this).is(':checked')) ? true : false;
  $('#one, #two').prop('checked', prop);
});

对于jQuery旧版本 （因为我在你的jsFiddle中看到你使用的是jQuery 1.4.4版本）此外，这段代码适用于所有版本。

$('#one, #two').click(function(e) {
  var prop = ($(this).is(':checked')) ? true : false;
  $('#one, #two').attr('checked', prop);
});

依赖复选框，您认为这可以更简化吗？

3 个答案: