Question

我是Jquery的新手，我正在努力解决以下问题;我有一个产品列表，我想将其添加到比较列表中。用户选择产品（复选框），值存储在数组中并以div显示。

我无法实现以下目标：

限制chckArray仅存储2个值（2个产品）或限制用户检查2个以上的复选框
默认情况下隐藏Div container，复选框点击显示（如果数组不为空），当取消选中所有复选框时隐藏（删除数据追加）
以Div <li>显示两个所选项目的值（产品ID）

请任何提示表示赞赏。的 HTML

// checkboxes from loop

<input type="checkbox" value="<?php echo $res['id'];?>" class="bottomRight" id="<?php echo $res['id'];?>" title="Compare" style="float:left;"  />


<div id="container" style="display:none;"> 
<p>You have added :</p>
<ul>
<li>First Checkbox Value</li>
<li>Second Checkbox Value</li>
</ul>

</div>

JS

$(document).ready(function () {

// Get the checkboxes values based on the class

$(".bottomRight").change(function() {
    getValueUsingClass();
 });  });


function getValueUsingClass(){

// declare Array
var chkArray = [];


// look for all checkboes that have a class 'chk' 

$(".bottomRight:checked").each(function() {
    chkArray.push($(this).val());
  });

Answer 1

您可以通过禁用剩余的:checked来限制chckArray仅存储2个值：

var n = $('input[type=checkbox]:checked').length >= 2;  
$('input[type=checkbox]').not(':checked').attr('disabled',n);

如果chkArray不为空，则显示<div>容器，如果为空则隐藏并删除列表：

if(chkArray.length !== 0){
    $('#container').show();        
}else{
    $('#container').hide(); 
    $('#container > ul').html('');    
}

将所选复选框显示为<li>：

$.each(chkArray, function(i, val) { 
   $('<li>').text(chkArray[i]).appendTo('#container > ul');               
});

请参阅此jsfiddle

jquery复选框（用作产品比较列表）

1 个答案: