3

チェックされているかどうかに応じて、次のphpページに「true」または「false」を投稿する一連のチェックボックスをWebフォームに作成しようとしています。各チェックボックス (value="true") に対して、常に反対の非表示のチェックボックス (value="false") を用意することにしました (チェックボックスがチェックされている場合、非表示のチェックボックスがチェックされていない場合など)。jQuery を使用しています。これをする。

'td' 要素の数は不明です ('td' は、ボタンを使用して無限に何度でもクローンを作成し、複数の値を送信できます)。テスト目的でアラートを jQuery に追加しました。

jQuery コードと非表示のチェックボックスをソース コードに追加すると (テスト目的で表示できるようにしました)、コードが機能せず、Web ページ上の他のすべての jQuery が機能しなくなりました。

jQuery コード:

$(document).ready(function(){
    /***post all 'required' checkboxes instead of just checked ones***/
    $(".required").click(function(event){
        event.preventDefault();
        alert("test");
        nextIndex = this.index() + 1;
        alert(nextIndex);
        $(".required:eq(nextIndex)").attr("checked", !.required:eq(nextIndex).attr("checked"));
    });
});

HTML:

<td>
    <input type="checkbox" class="required" name="required[]" value="true">
    <input type="checkbox" class="required" name="required[]" value="false" style="display: none;" checked>
</td>
4

3 に答える 3

8

チェックボックスの 1 つを非表示にする必要はありません。これは、あなたが望むものを達成するはずの解決策です:

<input type="hidden" name="required" value="false" />
<input type="checkbox" name="required" value="true" />

チェックボックスがチェックされていない場合、隠しフィールドはfalse値とともに送信されます。チェックボックスがチェックされている場合、チェックボックスの値が隠し入力trueの値を上書きします。false

各チェックボックスに少し異なる名前を付けることができる限り、それは機能するはずです。

以下は、値の配列に対しても機能するはずです。

<input type="hidden" name="required[0]" value="false" />
<input type="checkbox" name="required[0]" value="true" />

<input type="hidden" name="required[n]" value="false" />
<input type="checkbox" name="required[n]" value="true" />

このように、非表示のチェックボックスを切り替えるためにクライアント側の JavaScript は必要ありません。

于 2012-07-25T19:33:00.043 に答える
1

この行はおそらく問題を引き起こしています:

$(".required:eq(nextIndex)").attr("checked", !.required:eq(nextIndex).attr("checked"));

あなたはおそらく次のことを意味していました：

$(".required:eq(" + nextIndex + ")").attr("checked", !$('.required:eq(' + nextIndex + ')').attr("checked"));

また、引用符を外す必要があることに注意してくださいnextIndex。

私の推測では、JavaScript コンソールがこれに関連する何らかのエラーをスローしたと思われます。

編集：

私が気づいた別のエラーはこれでした：

nextIndex = this.index() + 1;

.index()jQuery オブジェクトで呼び出す必要がある jquery 関数です。thisはクリックされた要素なので、次のように言う必要があります。

nextIndex = $(this).index() + 1;

ところで、 jQuery の.next()関数をチェックアウトすることをお勧めします。このnextIndexマンボジャンボのすべてからあなたを救います.

于 2012-07-25T19:31:29.707 に答える
0

このようにチェックボックスに名前を付けている場合、必ずしも操作するインデックスがあるとは限りません:

<input type="checkbox" name="checkbox_name[]" />

次に、javascript に依存しても問題ないと仮定すると、この jQuery のスニペットが機能するはずです。

$('form').submit(function(){

    $(":checkbox:not(:checked)").each(function(element, index){
        $(this).attr({value: 'false', checked:'checked'});
    });

    return true;
});

これは、チェックされていないすべてのチェックボックスをループしてチェックし、それらの値を に設定しますfalse。PHPで得られるものは次のとおりです。

[checkbox_name] => Array
    (
        [0] => off
        [1] => on
        [2] => off
    )

それ以外の：

[checkbox_name] => Array
    (
        [0] => on
    )
于 2012-08-17T23:21:11.887 に答える