web-dev-qa-db-ja.com

JQueryを使用してonClickのチェックボックスの値を変更するにはどうすればよいですか？

ここでは、次のチェックボックスをクリックしながら値を変更しようとしています。以下のコードでは、チェックボックスの値を1に変更し、チェックを外すと値を0に変更しようとしました。ただし、チェックボックスをオフにすると値が0に変わり、チェックをオンにすると1に変わらないという誤った条件のみが発生します。これを修正する方法について何か提案はありますか？

<input type="checkbox" id="read" name="permission[]" onClick="($(this).checked)?$(this).attr('value',1):$(this).attr('value',0)"/>
javascriptjqueryformsdom-eventsternary-operator
8
Bala

なぜこれを実行するのかよくわかりません（チェックボックスをオフにすると、チェックボックスの値は送信されません）

DOM要素のcheckedプロパティ は、チェックされているかどうかを常に通知します。したがって、_this.checked_（Javascript DOM）または $(this).prop('checked') （jQueryラッパー）のいずれかを取得できます。

本当に必要な場合は、次のようにする必要があります。

_onclick="$(this).attr('value', this.checked ? 1 : 0)"
_

あるいは

_onclick="$(this).val(this.checked ? 1 : 0)"
_

またはさらに良いことに、 インラインイベントハンドラーを使用しないでください （onclickのように）が、jQueryのイベント処理ラッパーを使用します（ .on('click') または .click() 古いバージョンでは）。

jQueryイベント処理を使用したjsFiddleデモ

あなたのアプローチの問題

チェックボックスの状態を取得するために$(this).checkedを使用しています。 jQueryオブジェクト（_$_関数によって返されるオブジェクト）にはcheckedプロパティがないため、undefinedになります。 Javascriptでは、undefinedはfalsy値であるため、チェックボックスの値は常に_0_です。

24
kapa
// o = object
function get(o) { 

  ( $(o).val() == 0 ) ? $(o).val(1) : $(o).val(0);
    
  // alert( $(o).val() );
    
  console.log( $(o).val() );
                
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="permission[]" onClick="get(this)" value="0"/>
0
antelove

この単純なクリック機能を使用して、それを実現できます。

HTML：

<input type="checkbox" id="read" name="permission[]" value="0"/>

Jquery：

$("#read").click(function() {

                if($("#read").val()==0)
                {
                 $("#read").val(1);
                }
                else
                {
                 $("#read").val(0);
                }
                alert($("#read").val());
                
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="read" name="permission[]" value="0"/> 
Click the check box to toggle the value 0 and 1
0
Vignesh Chinnaiyan

通常、チェックボックス（またはラジオボタン）のvalue属性を変更する必要はありません。これにより、Webアプリケーションで追跡が困難なバグが発生します。

チェックされたときにフィールドに特定の値を割り当てたい場合は、非表示の入力を導入することも検討できます<input type="hidden"...>そして、チェックボックスではなく、それに値を割り当てます。

0
The Nail