Я хочу, чтобы флажки работали как переключатели и одновременно добавляли и удаляли данные при проверке и сняли отметку соответственно.
То, что я получил, отлично работает, когда проверяется только один флажок, но не работает, когда я проверяю оба. Проблема в том, что после проверки 1-го флажка, когда я проверяю второй ящик, 1-й не снят, но значение 1-го не удаляется из списка.
Вот скрипка: http://jsfiddle.net/uZvMA/
JavaScript:
var $unique = $('input.unique');
$unique.click(function() {
$unique.filter(':checked').not(this).removeAttr('checked');
});
$("#BlackOlives-Half").change(function() {
// If checked
var value = $(this).val(),
$list = $("#itemList");
if (this.checked) {
//add to the right
$list.append("<li data-value='" + value + "'>" + value + "</li>");
}
else {
//hide to the right
$list.find('li[data-value="' + value + '"]').slideUp("fast", function() {
$(this).remove();
});
}
});
$("#BlackOlives-Full").change(function() {
// If checked
var value = $(this).val(),
$list = $("#itemList");
if (this.checked) {
//add to the right
$list.append("<li data-value='" + value + "'>" + value + "</li>");
}
else {
//hide to the right
$list.find('li[data-value="' + value + '"]').slideUp("fast", function() {
$(this).remove();
});
}
});
HTML:
<ul>
<li><div id="BlackOlives-Half10">Black Olives</div>
<div class="radioButtons">
<input type="checkbox" id="BlackOlives-Half" onchange="" class='unique' name="BlackOlives" value="5" /> <label for="BlackOlives-Half">Half</label>
<input type="checkbox" id="BlackOlives-Full" onclick="" class='unique' name="BlackOlives" value="10" /> <label for="BlackOlives-Full">Full</label>
</div>
</li>
</ul>
<ul id="itemList"></ul>
Проблема в том, что вы программно устанавливаете проверенное состояние, но оно не запускает событие изменения, необходимое для запуска события изменения после. путем вызова .trigger('change');
Вы не можете быть заинтересованы в этом решении сейчас, когда у вас есть рабочий, но я бросил вызов самому немного улучшить исходный код. Вместо того, чтобы просто называть change
во всем и быть удовлетворенными, я также хотел, чтобы ваш код не требовал почти 10 дополнительных строк кода за флажок, который вы хотели бы поддержать.
Эта скрипта включает расширение jQuery, которое обеспечит уникальность, сохранит ваши анимации и позволит повторно использовать (в некоторой степени - это не идеально, учитывая, что он требует использования ul
.)
По крайней мере, пожалуйста, взгляните и научитесь себе новую вещь сегодня :)
EDIT: Обновлен JSFiddle с доказательством, что он работает в нескольких экземплярах. http://jsfiddle.net/uZvMA/6/
ul
перед добавлением нового li
.
Вместо добавления, дайте html в BlackOlives-Half и BlackOlives-Full, если условие
$("#BlackOlives-Half").change(function() {
// If checked
var value = $(this).val(),
$list = $("#itemList");
if (this.checked) {
//add to the right
$list.html("<li data-value='" + value + "'>" + value + "</li>");
}
else {
//hide to the right
$list.find('li[data-value="' + value + '"]').slideUp("fast", function() {
$(this).remove();
});
}
});
$("#BlackOlives-Full").change(function() {
// If checked
var value = $(this).val(),
$list = $("#itemList");
if (this.checked) {
//add to the right
$list.html("<li data-value='" + value + "'>" + value + "</li>");
}
else {
//hide to the right
$list.find('li[data-value="' + value + '"]').slideUp("fast", function() {
$(this).remove();
});
}
});