javascript - 依赖复选框，你认为这可以简化更多吗？

Question

我有以下正在运行的代码，我想知道这是否可以进一步简化。

演示：http: //jsfiddle.net/TnpNV/8/

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

演示

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

​</p>