1

また、ユーザーがすでにチェックされている要素を再度クリックすると、チェックボックスがすでにオンになっている場合は、チェックボックスがオフに戻ります。どうすればこれを行うことができますか？

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>

​
4

3 に答える 3

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 値は一意である必要があり、数字で始まることはできません。

于 2012-05-18T08:22:10.853 に答える
0

これを試して：

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

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

また、興味深いプラグインhttp://archive.plugins.jquery.com/project/checkboxesもあります

于 2012-05-18T08:19:30.477 に答える
0

このソリューションは、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/

于 2012-05-18T08:25:31.790 に答える