依賴複選框，你認爲這可以更簡化嗎？

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

緊湊最有效的演示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

試試這個，只是兩行:-)

現場演示：

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