[英]How to copy the state of a manually (un)checked checkbox?
In other words, without triggering Javascript events to change the attributes of the <input>
, how to preserve the state of a checkbox that I manually checked or unchecked and then copied to another place? 换句话说,在不触发Javascript事件更改<input>
属性的情况下,如何保留我手动选中或未选中然后复制到另一个位置的复选框的状态?
Run the snippet below and check or uncheck a few of them and hit "copy": 运行以下代码段,然后选中或取消选中其中一些,然后点击“复制”:
$('#cp').click(function(){ $('#copy').html($('#original').html()) $('#copy-clone').html($('#original').clone().html()) }) $('#hi').click(function(){ $('#original input:checked').parent().css('border','2px solid red') })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="original"> <label><input type="checkbox" name="man">man</label> <label><input type="checkbox" name="woman">woman</label> <label><input type="checkbox" name="monkey">monkey</label> <label><input type="checkbox" name="banana" checked="checked">banana</label> </form> <button id="cp">copy</button> <button id="hi">highlight</button> <br><form id="copy"></form> <br><form id="copy-clone"></form>
Those previously or manually :checked
are correctly selected, but the states of the manually changed ones is never copied (run the snippet, select a few, hit "highlight" and then "copy")... 之前或手动:checked
那些已正确选择,但是从未更改过手动更改的状态(运行代码段,选择一些,点击“突出显示”,然后单击“复制”)...
Don't use .html()
to clone the elements 不要使用.html()
克隆元素
$('#cp').click(function(){ var original = $('#original'); $('#copy').empty().append(original.clone()); $('#copy-clone').empty().append(original.clone()); }) $('#hi').click(function(){ $('#original input:checked').parent().css('border','2px solid red'); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="original"> <label><input type="checkbox" name="man">man</label> <label><input type="checkbox" name="woman">woman</label> <label><input type="checkbox" name="monkey">monkey</label> <label><input type="checkbox" name="banana" checked="checked">banana</label> </form> <button id="cp">copy</button> <button id="hi">highlight</button> <br><form id="copy"></form> <br><form id="copy-clone"></form>
Use clone(true)
to deep copy the element's data/state ( docs ).使用 clone(true)
深度复制元素的数据/状态( docs )。
Edit per the Andreas' comment: The html()
call on the clone is unnecessary. 根据Andreas的评论进行编辑:无需对克隆进行html()
调用。
$('#cp').click(function(){ $('#copy').html($('#original').clone()) $('#copy-clone').html($('#original').clone()) }) $('#hi').click(function(){ $('#original input:checked').parent().css('border','2px solid red') })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="original"> <label><input type="checkbox" name="man">man</label> <label><input type="checkbox" name="woman">woman</label> <label><input type="checkbox" name="monkey">monkey</label> <label><input type="checkbox" name="banana" checked="checked">banana</label> </form> <button id="cp">copy</button> <button id="hi">highlight</button> <br><form id="copy"></form> <br><form id="copy-clone"></form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.