web-dev-qa-db-ja.com

チェックボックスがオンになっているかどうかに基づいてアラートボックスを表示する方法Javascriptを使用している

ページのチェックボックスをオンにすると、チェックアウト履歴の表示を選択したユーザーに通知するアラートメッセージが表示されるようにしようとしています。ユーザーがチェックボックスの選択を解除すると、チェックアウト履歴の表示をオプトアウトしていることを知らせる別のアラートボックスが表示されます。チェックボックスがオン/オフになっている場合でも、アラートボックスを表示するだけで問題が発生します。これが私のコードです。

HTML

<div class="myAccountCheckboxHolder" id="showCheckoutHistoryCheckbox">
    <input tabindex="40" checked="checked" id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox">
        <label for="showCheckoutHistory" class="checkLabel">Show my checkout history</label>
    </div>

Javascript

function validate() {
    var checkoutHistory = document.getElementById('showCheckoutHistory');
    if (checkoutHistory.checked) {
        alert("You have elected to show your checkout history.");
    } else {
        alert("You have elected to turn off checkout history.");
    }

ありがとうございました。

javascriptjquerycheckboxalert
6
r.doleano

jQuery（元の回答）

jQuery(document).ready(function() {
    jQuery('#showCheckoutHistory').change(function() {
        if ($(this).prop('checked')) {
            alert("You have elected to show your checkout history."); //checked
        }
        else {
            alert("You have elected to turn off checkout history."); //not checked
        }
    });
});

ここのドキュメント： http://api.jquery.com/prop/

JavaScript（2018アップデート）

これを実現するためにJavaScriptライブラリは必要ないことに注意してください。

// Check current state and save it to "checked" variable
var checked = document.getElementById("showCheckoutHistory").checked; 

// Set state manually (change actual state)
document.getElementById("showCheckoutHistory").checked = true; // or
document.getElementById("showCheckoutHistory").checked = false;

より純粋なJavaScriptソリューションについては、私がお勧めしますVanilla.js： http://Vanilla-js.com/ フレームワーク;）

20
Jacek Kowalewski

したがって、チェックボックスの変更には、jQueryが提供するchangeリスナーを使用します。したがって、JavaScriptを次のようにします。

$("#showCheckoutHistory").change(function(event){
    if (this.checked){
        alert("You have elected to show your checkout history.");
    } else {
        alert("You have elected to turn off checkout history.");
    }
});

ここでは 作業フィドル のようになります。

8
Andy Novocin

これはjQueryなしの動作バージョンです。実際、関数に閉じ括弧が付いていると、コードはかなりうまく機能しました。イベントリスナーを追加して、checkoutHistoryvarを関数の外に移動しました。

var checkoutHistory = document.getElementById('showCheckoutHistory');
checkoutHistory.onchange = function() {
    console.log(checkoutHistory);
    if (checkoutHistory.checked) {
        alert("You have elected to show your checkout history.");
    } else {
        alert("You have elected to turn off checkout history.");
    }
}

これが私が使用したJSFiddleです。 http://jsfiddle.net/aaFe5/

5
Scotty C.