jquery - jquery 当用户单击一个元素时，我需要将一个复选框从未选中切换到检查我该怎么做？

Question

并且当用户重新单击已选中的元素时，如果已选中，复选框将变回未选中。我该怎么做呢？

http://jsfiddle.net/DZtwq/

<div class="demo" style="width:520px; height:300px;">


<ol id="selectable">
  <li id="1" class="ui-state-default">1</li>
  <li id="2" class="ui-state-default">2</li>
  <li id="3" class="ui-state-default">3</li>
  <li id="4" class="ui-state-default">4</li>
  <li id="5" class="ui-state-default">5</li>
  <li id="6" class="ui-state-default">6</li>
  <li id="7" class="ui-state-default">7</li>
  <li id="8" class="ui-state-default">8</li>
  <li id="9" class="ui-state-default">9</li>
</ol>


<input id="1" type="checkbox">
<input id="2" type="checkbox">
<input id="3" type="checkbox">
<input id="4" type="checkbox">
<input id="5" type="checkbox">
<input id="6" type="checkbox">
<input id="7" type="checkbox">
<input id="8" type="checkbox">
<input id="9" type="checkbox">


<p id="feedback">
<span>Youve selected:</span> 
<span id="select-result">none</span>.
</p>
</div>

​

Answer 1

这将做到：

$('#selectable li').click(function(){
   var id = $(this).attr('id');
    $('input[type=checkbox]').each(function(){
        if ($(this).attr('id')==id) {
           if (this.checked) $(this).removeAttr('checked');
           else              $(this).attr('checked','checked');
        }
    });
});

但请注意，您的 html 无效。Id 值必须是唯一的，并且不能以数字开头。

Answer 2

此解决方案将与 selectable() 的拖动选择功能一起使用

        $("li", this).each(function() {
            var check = $("#c"+$(this).attr("id"));
            console.log($(check).html());
            if ( $(this).hasClass("ui-selected") ) {
                $(check).attr("checked", true);
            } else {
                $(check).attr("checked", false);
            }
        });

您应该避免对不同的元素使用相同的 id

一个工作示例：http: //jsfiddle.net/Z2s2B/

Answer 3

尝试这个：

http://www.electrictoolbox.com/check-uncheck-checkbox-jquery/

$('input[name=foo]').attr('checked', true);

还有这个插件http://archive.plugins.jquery.com/project/checkboxes你可能会觉得有趣