Question

我主要编写HTML和PHP，我对Javascript或Jquery不太满意。但我也知道Jquery和javascript有一些非常酷的功能，可以在您正在查看网站的计算机或设备上呈现。

我希望能够使用html输入类型='复选框'选择多行，并且每次点击一下，以自动更新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)
}

输出将是[＆＃34; 65＆＃34;，＆＃34; 66＆＃34;，＆＃34; 67＆＃34;，＆＃34; 68＆＃34;]

删除数组中添加的值

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文件中的某处定义此函数。如果您还没有任何功能，可以先在<script>标记内的HTML页面上定义此功能。

<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

尝试以下方法：

在复选框中添加一个类，以便我们可以向它们添加一个click事件，然后在点击事件中，我们使用:checked选择器获取所有选定元素，我们使用val()从它们获取值，然后我们使用push()将它们推送到数组，之后我们对数组进行编码（即通过使用encodeURIComponent();

连接其中的元素将其转换为字符串

使用attr()函数

将新的字符串附加到链接的href属性中

<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

这会对你有所帮助。您创建了一个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);
});

更新Javascript数组，所以我可以将它传递给PHP

6 个答案: