1

このスクリプトを設定して、データベース内のすべての関連ユーザーを、横にチェックボックスがあるページにエコーします。いくつかのチェックボックスをオンにしてフォームを送信することにより、データベース内のこれらのユーザーからグループを作成できます。これはすべてうまくいきます。

残念ながら、私たちのデザイナーはこれが好きではありません。彼女が望んでいるのは、基本的に画面の左側にある6つの空のフィールドのリストです。次に、画面右側の人の名前の横にあるプラスボタンをクリックすると、その名前が最初の空のフィールドに表示されます...以下同様に、クリックされた後続のプラスボタンごとに表示されます。

したがって、これらすべてを再コーディングする代わりに（実際にはオプションではありません）、jQueryを使用してこれらすべてを「再スタイル化」できると思います。チェックボックスのスタイルを設定して、選択されていない場合はプラス、選択されている場合はマイナスのように見せることができます。

次に、チェックボックスをクリックしたときに人の名前が取得され、最初の空のボックスに挿入されるように、何らかのイベントを実行する必要があります。それはすべてただの煙と鏡です。空のボックスは、境界線のあるdivである可能性があります。機能的には、すべて以前と同じように機能します。

これが実行可能かどうかを誰かが確認できますか？私のJSの知識はひどく、どこから始めればよいのかわかりません。さらに、ページにはすでに次のjQueryバリデーター関数があり、この新しいJSが干渉しないようにします。

$(document).ready(function(){
$("#myform").validate({
    debug: false,
    rules: {
        group: {required: true}, 
    },
    messages: {
        group: {required: " Field required.", loginRegex: " Invalid character."},
    },
    submitHandler: function(form) {
        $('input[type=submit]').attr('disabled', 'disabled');
        $('#results').html('Loading...');
        $.post('process_group.php', $("#myform").serialize(), function(data) {
            $('#results').html(data);
        });
    }
    });
});

私が要求しているのは、チェックボックスをコーディングして、チェックされたときにその値をdivに挿入する方法に関するアドバイスだと思います。チェックされていないときにその値を削除します。

4

1 に答える 1

1

私があなたを正しく理解している場合は、JQueryで次のことを行う必要があります。

1）サーバー側のコードによって生成されたチェックボックス（）をクリック可能な+/-記号に置き換えます。

これを行うには、チェックボックスを見つけて、デフォルトのステージを+の背景画像を持つ空のリンクに置き換えます。

$('checkbox').remove().html('<a href="#" style="background-image:plusSign.png">Some Name</a>');

インラインスタイルの代わりに、方法を知っている場合は、プラス記号とマイナス記号の背景画像をCSSクラスにする必要があります。

2）クリックしたときに+を-に変更し、3）+記号の横にあるユーザーの名前を別の場所（空の入力ボックスに表示しますか？）に表示します。

背景画像を切り替えるには、クリックしたときにスタイル（または画像をCSSクラスにする方法を知っている場合はクラス）を変更するだけです。次に、コンテンツを取得して、ターゲット要素に配置します。

このjsFiddleは、私が上で説明していることを説明するのに役立つかもしれません：http: //jsfiddle.net/Ap2yW/1/

于 2012-06-19T17:32:54.710 に答える