驗證複選框選擇使用javascript

我需要幫助編寫一個自定義函數，我需要做的。驗證複選框選擇使用javascript

概念很簡單：我向客戶提供約20種產品的清單，然後讓他們用複選框從整個清單中選擇5種產品。

雖然他們確實選擇了產品，但它需要更新隱藏的輸入，因此我可以將其插入到我的數據庫中。

我們可以從這樣的事情開始：http://jsfiddle.net/9mxh5/但它只需要工作，所以我只能選擇一些複選框。

下面是一些代碼，我們可以使用太

<input type="checkbox" name="products" value="product1" onChange="javascript:updateProducts();"/> 
<input type="checkbox" name="products" value="product2" onChange="javascript:updateProducts();"/> 
<input type="checkbox" name="products" value="product3" onChange="javascript:updateProducts();"/> 
<input type="checkbox" name="products" value="product4" onChange="javascript:updateProducts();"/> 

<!-- Hidden --> 
<input type="hidden" name="myFiveProducts" value="THELIST" />

我用的jsfiddle那裏和適應它就像我想這樣做：http://jsfiddle.net/ENxnK/15/

THX提前對您有所幫助。

來源

2012-11-06 Patrice Poliquin

這是爲你工作。那麼問題是什麼。我的意思是你想要什麼？ – polin

jsfiddle不是從我..我想能夠計數數字「檢查」框，當我在五個檢查，我不能檢查新的。 –

不要忘了upvote並將答案標記爲已接受，如果您獲得了我想要的信息 –

我給出了3的條件。您可以將其更改爲5，我認爲您可以自己分配隱藏變量。如果我不能，那麼讓我知道。我會更新它

<script type="text/javascript"> 
var i=0; 
    function updateProducts(myid) 
{ 

    if(document.getElementById(myid).checked==true) 
    {i=i+1; 

    if(i==3) 
    { 
    document.getElementById("products1").disabled="disabled"; 
    document.getElementById("products2").disabled="disabled"; 
    document.getElementById("products3").disabled="disabled"; 
    document.getElementById("products4").disabled="disabled"; 
    } 
    } 
    else 
    i=i-1; 
} 
</script> 
    <div id="mydiv"> 
<input type="checkbox" id="products1" value="product1" onChange="javascript:updateProducts(this.id);"/> 
<input type="checkbox" id="products2" value="product2" onChange="javascript:updateProducts(this.id);"/> 
<input type="checkbox" id="products3" value="product3" onChange="javascript:updateProducts(this.id);"/> 
<input type="checkbox" id="products4" value="product4" onChange="javascript:updateProducts(this.id);"/> 
</div>

來源

2012-11-06 07:19:10 polin

但是，如果我希望能夠取消選中是否需要不同選項，該怎麼辦？像：檢查的那些保持開啓和未檢查的開啓禁用？ –

編輯：你可以做隱藏的輸入更新嗎？ –

@polin

我找到了一種方法做我想要的，但是這不是很optimsed ..

我使用類，以確定至極一個被選中，不。然後，我確定何時沒有課程來禁用它。

只需要一個更好的代碼：d

JavaScript的

var i = 0; 
function updateProducts(myid) 
{ 

    if(document.getElementById(myid).checked == true) 
    { 
     // Add a class to the element 
     document.getElementById(myid).className = "classCheck"; 

     i = i + 1; 

     // If I got my maximum 
     if(i == 3) 
     { 
      if(!$('#products1').hasClass('classCheck')) 
      { 
       document.getElementById("products1").disabled="disabled"; 
      } 
      if(!$('#products2').hasClass('classCheck')) 
      { 
       document.getElementById("products12").disabled="disabled"; 
      } 
      if(!$('#products3').hasClass('classCheck')) 
      { 
       document.getElementById("products3").disabled="disabled"; 
      } 
      if(!$('#products4').hasClass('classCheck')) 
      { 
       document.getElementById("products4").disabled="disabled"; 
      } 
     } 
    } 
    else 
    { 
     document.getElementById(myid).className = ""; 
     i = i - 1; 

     // If I'm not at the maximum 
     if(i < 3) 
     { 
      // I can switch them all enable 
      $('#products1').removeAttr('disabled'); 
      $('#products2').removeAttr('disabled'); 
      $('#products3').removeAttr('disabled'); 
      $('#products4').removeAttr('disabled'); 
     } 
    } 
}

的HTML

<div id="mydiv"> 
<input type="checkbox" id="products1" value="product1" onChange="javascript:updateProducts(this.id);"/> 
<input type="checkbox" id="products2" value="product2" onChange="javascript:updateProducts(this.id);"/> 
<input type="checkbox" id="products3" value="product3" onChange="javascript:updateProducts(this.id);"/> 
<input type="checkbox" id="products4" value="product4" onChange="javascript:updateProducts(this.id);"/> 
</div>

來源

2012-11-06 13:50:50

驗證複選框選擇使用javascript

回答

相關問題