更新Javascript數組，所以我可以將它傳遞給PHP

Question

我主要編寫HTML和PHP，我真的不太擅長Javascript或Jquery。但我也知道jquery和javascript有一些非常酷的功能，可以在您瀏覽網站的計算機或設備上呈現。

我希望能夠選擇html輸入類型='checkbox'的多行，並且每點擊一次，就會自動更新一個只會在計算機上自動更新標籤的javascript或jquery數組。這種方式當我點擊我的鏈接時，頁面將改變，PHP將接管。如果我不必使用表單，這將非常棒。

下面是一個例子

<input type='checkbox' value='65' /> 
<input type='checkbox' value='66' />  
<input type='checkbox' value='67' /> 
<input type='checkbox' value='68' /> 

<a href='./?p=test&array=65,66,67,68'> 

結果，我希望得到的是數組[65，66，67，68]

我找不到已經回答了這個線程，請原諒如果有的話。我可能也沒有正確地問。

Answer 1

你的HTML應該是

<input type='checkbox' onclick ="getVal(this)" value='65' /> 
<input type='checkbox' onclick ="getVal(this)" value='66' />  
<input type='checkbox' onclick ="getVal(this)" value='67' /> 
<input type='checkbox' onclick ="getVal(this)" value='68' /> 

你的JS將

var list = []; 
function getVal(cb){  
    list.push(cb.value); 
    console.log(list) 
} 

輸出將是[ 「65」， 「66」， 「67」， 「68」]

刪除數值如果添加到陣列中

var list = []; 
function getVal(cb){ 
    if(cb.checked){ 
     list.push(parseInt(cb.value)); 
    } else{ 
     for(var i=0; i<list.length;i++) { 
      if(cb.value == list[i]){ 
       list.splice(i,1); 
      } 
     } 
    }  
    console.log(list) 
} 

Answer 2

什麼你想在這裏是一個eventListener，它將幫助你捕獲用戶使用你的複選框執行的事件。

有兩種事件方法可以實現此目的。

• 平變化
• 的onclick

每當用戶點擊該複選框，這些方法將被調用。這兩者之間雖然有細微的差別，但從任何一個開始都應該適合你。

您需要做的是將其中一個添加到您的DOM。像：

<input type='checkbox' value='65' onclick = 'doThisOnCLick(this)'/> 

在此之後，你需要在你的相關JS文件的某處定義這個函數。如果你還沒有任何功能，你可以從你的HTML頁面本身定義<script>標籤開始。

<script> 
    var someArray = []; 
    function doThisOnChange(c){ 
    someArray.push(a.value); //this will push 69 to array, similarly others can be pushed 
    } 
</script> 

希望這可以幫助你。爲了更好的理解，我建議稍微品嚐一下JS。其簡單的，真棒

Answer 3

試試這個：

$('input:checkbox').change(function(){ 

var checked = $('input:checkbox').map(function() { 
    return this.checked ? this.value :null ; 
}); 

console.log(checked); 

}); 

這將記錄檢查的項目。

看這個jsfiddle用於演示

希望這將有助於:)

Answer 4

嘗試以下操作：

添加類的複選框，所以我們可以點擊事件添加到他們，然後 在點擊事件中，我們使用:checked選擇器取得所有選定的元素，我們使用val()獲得它們的值，然後我們使用push()將它們推送到數組，然後我們對數組進行編碼（通過連接元素將其轉換爲字符串）使用encodeURIComponent();

新的字符串，導致使用attr()功能

<input class="el" type='checkbox' value='65' /> 
<input class="el" type='checkbox' value='66' />  
<input class="el" type='checkbox' value='67' /> 
<input class="el" type='checkbox' value='68' /> 
<a class="link" href="">link</a> 

var array_elements = []; 
$('.el').click(function(){ 
    $('.el:checked').each(function(i,v){ 
    array_elements.push($(v).val()); 
    }); 
    var url = './?p=test&array'+encodeURIComponent(array_elements.join(',')); 
    $('.link').attr('href',url); 
}); 

https://jsfiddle.net/zgjeo8sw/2/

Answer 5

這將幫助你追加到鏈接的href屬性。您創建一個jQuery腳本，更新你的鏈接每當複選框被點擊這樣的：

<input type='checkbox' class='chkbx' value='65' /> 
<input type='checkbox' class='chkbx' value='66' />  
<input type='checkbox' class='chkbx' value='67' /> 
<input type='checkbox' class='chkbx' value='68' /> 

<a href='./?p=test&array='> 

<script> 
    $('input.chkbx').click(function(){ 
     value = $(this).attr('value'); 
     link = $('a').attr('href'); 
     // to get the last character of the link 
     lastC = link.substr(link.length -1); 
     if($(this).is(':checked')){ 
      if(lastC == "=") { 
       $('a').attr('href', link+value); 
      } else { 
       $('a').attr('href', link+','+value); 
      } 
     } else { 
      y = link.splice(','); 
      y.splice($.inArray(value, y), 1); 
      x = y.join(delimiter); 
      $('a').attr('href', x); 
     } 
}) 
</script> 

這樣你也會更新鏈接添加的複選框的新價值，也當複選框選中，它會從鏈接它的價值也

Answer 6

請試試這個，str變量的輸出會像65,66,67,68可用於構建查詢字符串

var str = ''; 
$('input:checkbox').change(function(){ 
    $('input:checkbox:checked').each(function() { 
      str += $(this).val()+','; 
    }); 
    str = str.replace(/,$/,''); 
    console.log(str); 
});