0

私は人々のリストを持つページに取り組んでいます。ユーザーは、1 つまたは複数の行を選択できる必要があります。クリックすると一度に 1 人だけが選択されますが、Ctrl キーと Shift キーを使用すると複数選択できる Windows エクスプローラーと同じようにページを動作させたいと思います。

私は jsFiddle でサンプルを作成しました。私が知る限り、Firefox と IE10 で動作しています。

var first_num;
var second_num;
var low_num;
var high_num;
var i;
var selected;
var multiple_lines_selected = 0;

$('label').click(function(e){
    if (e.shiftKey){
        multiple_lines_selected = 1;
        $('input').prop('checked', false);
        first_num = parseInt(selected.replace(' input','').replace('#n',''));
        second_num = parseInt($(this).attr('ID').replace('n',''));
        low_num = Math.min(first_num,second_num);
        high_num = Math.max(first_num,second_num);
        i = low_num;
        while (i<=high_num) {
            $('#n'+i +' input').prop('checked', true);
            i++;
        }
    }
    else if (e.ctrlKey){
        multiple_lines_selected = 1;
        selected = '#'+$(this).attr('ID') +' input';
        if (!$(selected).is(':checked')) {$(selected).prop('checked', true);}
        else {$(selected).prop('checked', false);}
    }
    else {
        selected = '#'+$(this).attr('ID') +' input';
        $('input').not(selected).prop('checked', false);
        if (multiple_lines_selected) {
            setTimeout(function(event){$(selected).prop('checked', true);});
        }
        multiple_lines_selected = 0;
    }
});
$('label').mousedown(function(e){
    window.getSelection().removeAllRanges();
});

HTMLは単なる繰り返しです

<label id="n1" class="row">
    <input type="checkbox" />Person 1
</label>

アドバイスや助けに感謝します！

jsFiddle へのリンク: http://jsfiddle.net/mExp4/1/

EDIT 1 : Chrome で奇妙なバグを見つけました。コントロールキーを押しながら行をクリックすると、すべてが期待どおりに動作します。ただし、実際のチェックボックスをクリックしても、何も変わりません。考え？

EDIT 2：Chromeで見つけた「バグ」はFirefoxとIEにも存在しますが、注意を払っていませんでした。それがバグかどうかはわかりませんが、回避する方法はまだわかりません。ラベルをクリックすると、問題なく動作します。コントロールキーを使用しているときにチェックボックスをクリックすると、うまく機能しません。

これは、JavaScript がない場合、コントロールまたはシフトを保持しているときにラベルをクリックしても内部のチェックボックスがアクティブにならないという事実に戻ると思います。これにより、.click の代わりに .change を使用しようとする試みが妨げられました。何かご意見は？

4

1 に答える 1

0

問題を解決する方法を見つけましたが、それはハッキングされた答えであるため、より良いオプションを受け入れることができます。基本的に、チェックボックスの上にホバーする非表示の div を追加しました。ただし、それをクリックすると、チェックボックスがアクティブになります。ただし、ラベルとチェックボックスの両方を一度にではなく、ラベルを介してアクティブにします。

JavaScript を使用しない人のために、スクリプトで開始display:noneおよび表示されます。ここでの目標の 1 つは、身体が不自由なときに優雅な人を持つことです。

.checkbox_overlay {
    height:40px;
    width:20px;
    display:none;
    position:absolute;
    margin-top:-10px;
    float:left;
}

<label id="n1" class="row">
    <div class="checkbox_overlay"></div>
    <input type="checkbox" />Person 1
</label>

作業例: http://jsfiddle.net/mExp4/4/

于 2013-04-04T17:58:23.483 に答える