JQuery Checbox (использовать в качестве списка сравнения продуктов)

Question

JQuery Checbox (использовать в качестве списка сравнения продуктов)

0

Я новичок в JQuery, и я борюсь со следующим: У меня есть список продуктов, которые я хотел бы добавить в список сравнения. Пользователь выбирает продукт (флажок), а значения хранятся в массиве и отображаются в div.

Мне трудно достичь следующего:

Ограничьте chckArray чтобы сохранить только 2 значения (2 продукта) или ограничить пользователя проверкой более чем двух флажков
container Div скрыт по умолчанию, при отображении на флажке (если массив не равен нулю), когда все флажки не отмечены, скрываются (удалять данные)
Отображение в Div <li> Значение (идентификатор продукта) двух выбранных элементов

пожалуйста, любые подсказки приветствуются. 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());
  });

Awena 01 дек. 2013, в 23:20

Источник

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

Mark S · Accepted Answer · 2013-12-01T23-21-00.000Z

Вы можете ограничить chckArray, чтобы сохранить только 2 значения, отключив оставшееся нет :checked:

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

Если chkArray не равно null, покажите контейнер <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

Привет Марк, это именно то, чего я пытался достичь. Спасибо за помощь!! быстрый вопрос, в PHP при передаче массива или необходимости печати значения массива это будет выглядеть как echo $ chkArray [0]; echo $ chkArray [1] (в этом примере 2 первых значения) насколько он отличается в Jquery? chkArray.toString (); а как получить первое и второе значение? или передать его как Post to PHP. просто если вы намекаете мне на какой-нибудь учебник ... еще раз, спасибо!
Если вы хотите преобразовать один элемент массива в toString() , просто укажите индекс chkArray[1].toString(); , Если вы хотите передать массив в PHP, вы можете использовать JSON, это язык обмена данными. Сначала необходимо кодировать массив JSON.stringify(chkArray) затем декодировать его на стороне PHP $chkArray=json_decode($_POST['jsondata']);