javascriptでチェックボックスをオフにする方法

Question

次のコードがあります。おかげ

function SetHiddenFieldValue() 

    { 
     var checks = document.getElementById('toppings').getElementsByTagName('input'); 
     var toppings = new Array(); 
     var randomNumber = Math.floor((Math.random() * 9000) + 100); 
     var totalChecked = 0; 
     var itemPrice = 5.99; 

    for (i = 0; i < checks.length; i++) 
    { 
     if (checks[i].checked) 
     { 
      toppings[i] = checks[i].value; 
      totalChecked += 1; 
     } 
    } 

    if (totalChecked > 4) { 
     alert("You can only choose up to Max of 4 Toppings"); 
    } else {  
     itemPrice = itemPrice + (totalChecked * 0.99); 
     document.getElementById('my-item-name').value = toppings.join("\t"); 
     document.getElementById('my-item-id').value = randomNumber; 
     document.getElementById('my-item-price').value = itemPrice; 
    } 
} 

、私は自分の形で確認されているどのように多くのチェックボックスを参照する必要があり、そこ以上の4つの表示エラーがあると、最後のチェックボックスをオフにした場合、すべてが機能していますが、どのように私は最後のチェックボックスをオフにすることができますそして、私の形式は次のとおりです。

<form id="pizza" name="pizza" method="post" action="" class="jcart"> 
    <input type="hidden" name="my-item-id" id="my-item-id" value="" /> 
    <input type="hidden" name="my-item-name" id="my-item-name" value="" /> 
    <input type="hidden" name="my-item-price" id="my-item-price" value="" /> 
    <input type="hidden" name="my-item-qty" value="1" /> 
    <input type="submit" name="my-add-button" value=" add " /> 
</form> 

Answer 1

は、最後にチェックチェックボックスを追跡し、falseにそのcheckedプロパティを設定します。

// ... 
var lastChecked; // Will be used in loop below 
for (i = 0; i < checks.length; i++) 
{ 
    if (checks[i].checked) 
    { 
     toppings[i] = checks[i].value; 
     totalChecked += 1; 
     lastChecked = i; // Store the checkbox as last checked 
    } 
} 

if (totalChecked > 4) { 
    alert("You can only choose up to Max of 4 Toppings"); 
    checks[lastChecked].checked = false; // Uncheck the last checked checkbox 
} else { 
// ... 

あなたがトンをしたい場合O、4つの第1のものはなく、すべてのチェックを外し、このようにそれを実行します。

// ... 
for (i = 0; i < checks.length; i++) 
{ 
    if (checks[i].checked) 
    { 
     toppings[i] = checks[i].value; 
     totalChecked += 1; 
     if (totalChecked > 4) checks[i].checked = false; // Uncheck checkbox 
    } 
} 

Answer 2

は、さてあなたが何らかの形で特定のチェックボックスがちょうどチェックしたこのメソッドに渡す必要があります、その後、総点検カウントテストは、その後、失敗した場合チェックボックスの.checkedプロパティをfalseに設定するだけです。

Answer 3

ユーザーが5つ以上確認したらどうなりますか？

4つ以上のチェックボックスがオンの場合、falseを返すjavascript関数を作成する方法があります。各チェックボックスで、次のような新しい関数をフックします。

<input type="checkbox" onclick="return myNewFunction(this);"> 

これは、ユーザーが5番目のチェックボックスをチェックすることを禁止します。

Answer 4

私はこれを別に扱うと思います。私はチェックボックスの数をカウントする各チェックボックスにクリックハンドラを持っています（現在チェックされている場合はそれを含む）。もしそれが4より大きいかどうかを確認するためには、現在のイベントを停止し、アラートを発生させるチェックボックスの状態をアラートおよびリセットします。これにより、4番目のチェックボックスをクリックすると常にポップアップ表示されます。

javascriptが無効になっているケースを処理するには、サーバ側コードで4つ以下のチェックボックスがチェックされていることを確認する必要があります。

jQueryの例：

$(':checkbox').click(function() { 
    if ($(this).val() == 'on') { // need to count, since we are checking this box 
     if ($(':checkbox:checked').length > 4) { 
     alert("You can only choose up to a maximum of 4 toppings."); 
     $(this).val('off'); 
     } 
    } 
}); 

注意あなたがページ上のチェックボックスの他の種類を持っていた場合は、それらを区別するためにクラスを使用することができます。その場合、セレクタは(':checkbox.topping')と(':checkbox.topping:checked')になります。

Answer 5

また、4つのチェックボックスがオンになっている場合は、他のすべてのボックスを無効にして、「これらのうち4つを選択してください」などのメッセージを表示して無効にすることはできません。このようにして、ユーザーが無効であることをユーザーに知らせてから叱ることはできません。