更新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); 
});