Эй, ребята, я ищу хороший три состояния контроллера CheckBox в JS? Есть что-нибудь рекомендовать мне?
Состояния Я ищу являются
- Проверено
- непроверенный
- Безразлично (никогда не проверено / снят)
Хороший кросс-браузер с тремя состояниями флажок?
голоса
0
6 ответов
голоса 1
1
Используйте кнопки радио.
<input type="radio" name="tristate" value="checked" />Checked
<input type="radio" name="tristate" value="unchecked" />Unchecked
Если ни один, если радио не включены, то у вас есть свой третий «безразличное» или нулевое состояние.
голоса 1
1
Вы можете захотеть взглянуть на ExtJS.
Они имеют большое сообщество, которое часто строит такие вещи, и я уверен, что если вы гугл за одно это могло бы придумать. На самом деле здесь вы идете, вы можете быть в состоянии сделать несколько изменений в этом и заставить его работать так, как вы хотите:
http://extjs.net/forum/showthread.php?t=28096
Надеюсь это поможет!
голоса 0
0
Если вам нужно больше, чем два состояния, а затем использовать 3 кнопки радио.
Не думайте, что если пользователь ничего, чтобы означать третье состояние не выбрать. Что делать, если пользователь пропустил вопрос все вместе, или нажмите отправить по ошибке?
Если вы хотите, 3 состояния, то есть 3 состояния!
голоса 0
0
Использование HTML5 неопределенные элементы ввода .
голоса 1
1
Я разработал это решение во время работы над проектом. Он использует неопределенное состояние флажков (атрибут, который не может быть доступен / комплектом из разметки). В моем примере, у меня есть только один уровень вложенности, но он может быть вложен на неопределенное время, чтобы позволить группам и подгруппам быть ип, все или частично выбран.
Основная структура вращается вокруг манипулирования неопределенную атрибута, как это:
<input type="checkbox" value="HasFavoriteColor" name="FavoriteColor" id="myCheckBox" />
<input type="hidden" id="FavoriteColorState" name="FavoriteColorState" /><!-- potential values: 0, 1, -1 -->
<script type="text/javascript">
//using JQuery
$("#myCheckBox").prop("indeterminate", true);
//using pure javascript
document.getElementById("myCheckBox").setAttribute("indeterminate", true);
</script>
Я использовал его для выбора, все здесь, в моем примере, но он может быть использован только на индивидуальном флажке. Важно знать, что это не передает состояние в пост-обратно на сервер. Флажок быть вывешенным по-прежнему верно / неверно, так неопределенны влияет только на интерфейс. Если вам необходимо отправить значение обратно, вам придется связать неопределенное состояние в какое-то скрытое поле, чтобы сохранять это значение.
Более подробную информацию о неопределенном состоянии, в следующих источниках:
- http://css-tricks.com/indeterminate-checkboxes/
- http://www.w3.org/TR/html-markup/input.checkbox.html
Вот рабочий пример (внешняя скрипка): http://jsfiddle.net/xDaevax/65wZt/
Рабочий пример (Стек Сниппет):
var root = this;
root.selectedCount = 0;
root.totalCount = 0;
root.percentageSelected = 0.0;
root.holdTimer = 0;
jQuery.fn.customSelect = {
State: 0,
NextState: function () {
this.State += 1;
if (this.State > 2) {
this.State = 0;
} // end if
} // end object
};
function checkAllToggle(parent, toggle) {
if (parent != null && parent != undefined) {
parent.find("input[type='checkbox']").prop("checked", toggle);
for (var i = 0; i < parent.find("input[type='checkbox']").length; i++) {
$(document).trigger("item-selected", {
IsSelected: $(parent.find("input[type='checkbox']")[i]).prop("checked")
});
} // end for loop
} // end if
} // end function checkAll
var fadeTimer = setInterval(function () {
if (root.holdTimer > 0) {
root.holdTimer -= 1;
} else {
root.holdTimer = -2;
} // end if/else
if (root.holdTimer == -2) {
$(".options-status").fadeOut("easeOutBack");
root.holdTimer = -1;
} // end if/else
}, 50);
$(function () {
root.totalCount = $(document).find(".options-list input[type='checkbox']").length;
$(document).bind("select-state-change", function (e, data) {
switch (data.State) {
case 0:
data.Target.prop("checked", false);
data.Target.prop("indeterminate", false);
checkAllToggle($(".options-list"), false);
break;
case 1:
data.Target.prop("indeterminate", true);
e.preventDefault();
break;
case 2:
data.Target.prop("checked", true);
data.Target.prop("indeterminate", false);
checkAllToggle($(".options-list"), true);
break;
}
});
$(document).bind("item-selected", function (e, data) {
root.holdTimer = 50;
if (data != null && data != undefined) {
if (data.IsSelected) {
root.selectedCount += 1;
} else {
root.selectedCount -= 1;
} // end if/else
if (root.selectedCount > root.totalCount) {
root.selectedCount = root.totalCount;
} // end if
if (root.selectedCount < 0) {
root.selectedCount = 0;
} // end if
root.percentageSelected = (100 * (root.selectedCount / root.totalCount));
root.percentageSelected < 50 && root.percentageSelected >= 0 ? $(".options-status").removeClass("finally-there").removeClass("almost-there").addClass("not-there", 200) : false;
root.percentageSelected < 100 && root.percentageSelected >= 50 ? $(".options-status").removeClass("not-there").removeClass("finally-there").addClass("almost-there", 200) : false;
root.percentageSelected == 100 ? $(".options-status").removeClass("not-there").removeClass("almost-there").addClass("finally-there", 200) : false;
$(".options-status .output").text(root.percentageSelected + "%");
setTimeout(function () {
$(".options-status").fadeIn("easeInBack");
}, 100);
} // end if
});
$("#select-all").click(function (e) {
var checkbox = $(this);
if (checkbox.prop("checked") == true) {
checkbox.customSelect.State = 2;
} else {
checkbox.customSelect.State = 0;
} // end if/else
$(document).trigger("select-state-change", {
State: checkbox.customSelect.State,
Target: $("#select-all")
});
});
$("input[name='options']").each(function () {
$(this).click(function () {
if ($(this).prop("checked") == true) {
$(document).trigger("item-selected", {
IsSelected: true
});
if ($(this).parent().parent().find("input[type='checkbox']:checked").length == $(this).parent().parent().find("input[type='checkbox']").length) {
$(document).trigger("select-state-change", {
State: 2,
Target: $("#select-all")
});
} else {
$(document).trigger("select-state-change", {
State: 1,
Target: $("#select-all")
});
} // end if/else
} else {
$(document).trigger("item-selected", {
IsSelected: false
});
if ($(this).parent().parent().find("input[type='checkbox']:checked").length <= 0) {
$(document).trigger("select-state-change", {
State: 0,
Target: $("#select-all")
});
} else {
$(document).trigger("select-state-change", {
State: 1,
Target: $("#select-all")
});
} // end if/else
} // end if/else
});
});
});body {
font-family: Helvetica, Verdana, Sans-Serif;
font-size: small;
color: #232323;
background-color: #efefef;
padding: 0px;
margin: 0px;
}
H1 {
margin-top: 2px;
text-align: center;
}
LEGEND {
margin-bottom: 6px;
}
.content-wrapper {
padding: 2px;
margin: 3px auto;
width: 100%;
max-width: 500px;
min-width: 250px;
}
.wrapper {
padding: 3px;
margin: 2px;
}
.container {
border-right: solid 1px #788967;
border-bottom: solid 1px #677867;
border-top: solid 1px #89ab89;
border-left: solid 1px #89ab89;
}
.rounded {
border-radius: 2px;
}
.contents {
background: linear-gradient(rgba(255, 255, 255, 1), rgba(180, 180, 180, .2));
}
.header {
padding: 4px;
border: solid 1px #000000;
background-color: rgba(200, 200, 230, .8);
font-size: 123%;
background-image: linear-gradient(rgba(220, 220, 255, .8), rgba(200, 200, 230, .8));
}
#options-chooser {
margin-top: 30px;
display: block;
}
#options-chooser .options-list > LABEL {
display: table-row;
height: 26px;
}
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
.black {
color: black;
}
.options-status {
float: right;
right: 3%;
clear: both;
display: none;
margin-top: -20px;
}
.output {
font-weight: bold;
}
.not-there {
border-color: rgba(190, 190, 190, .3);
background-color: rgba(190, 190, 190, .1);
}
.almost-there {
border-color: rgba(220, 220, 50, .6);
background-color: rgba(220, 220, 50, .3);
}
.finally-there {
border-color: rgba(50, 190, 50, .3);
background-color: rgba(50, 190, 50, .1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
<div class="content-wrapper">
<div class="wrapper container rounded">
<div class="contents">
<h1 class="header rounded">Partial Select All Example</h1>
<p>This example demonstrates how to implement a tri-state checkbox with options.</p>
<form name="options-chooser" id="options-chooser" method="post">
<fieldset class="rounded options">
<legend class="rounded header">Options
<input type="checkbox" value="options-all" name="selectAll" id="select-all" title="Select All" />
</legend> <span class="options-status rounded container wrapper">Items Selected: <span class="output"></span></span>
<div class="options-list">
<label class="blue">
<input type="checkbox" name="options" value="1" />Blue</label>
<label class="green">
<input type="checkbox" name="options" value="2" />Green</label>
<label class="red">
<input type="checkbox" name="options" value="3" />Red</label>
<label class="black">
<input type="checkbox" name="options" value="4" />Black</label>
</div>
</fieldset>
</form>
</div>
</div>
</div>
голоса 0
0
У меня есть решение, используя нативный флажок и неопределенные свойства и хранение пользовательского атрибута в поле, чтобы захватить текущее состояние для достижения эффективного тройную состояния флажка.
Это решение опробовано также на последней Chrome и Firefox и хром (nw.js) на Linux и IE 11, Firefox и Chrome на Windohs.
Я отправил это решение JSFiddle .
Вот утилита одноточечно я использовал:
tscb$ = {
STATE_UNCHECKED: 0
,STATE_CHECKED: 1
,STATE_INDETER: 2
,setState: function(o,iState){
var t=this;
if(iState==t.STATE_UNCHECKED){
o.indeterminate=false; o.checked=false;
} else if(iState==t.STATE_CHECKED){
o.indeterminate=false; o.checked=true;
} else if(iState==t.STATE_INDETER){
o.checked=false; o.indeterminate=true;
} else {
throw new Error("Invalid state passed: `"+iState+"`")
}
o.setAttribute("tscbState", iState);
}
// Event to call when the cb is clicked to toggle setting.
,toggleOnClick: function(o){
var t=this, iNextState=t.getNextState(o)
if(iNextState==t.STATE_UNCHECKED){
o.checked=false;
} else if(iNextState==t.STATE_CHECKED){
o.checked=true;
} else if(iNextState==t.STATE_INDETER){
o.indeterminate=true;
}
o.setAttribute("tscbState", iNextState);
}
// For retrieval of next state
,getNextState: function(o){
var t=this, iState=t.getState(o)
if(iState==t.STATE_UNCHECKED){
return t.STATE_INDETER;
} else if(iState==t.STATE_CHECKED){
return t.STATE_UNCHECKED;
} else if(iState==t.STATE_INDETER){
return t.STATE_CHECKED;
}
}
,getState: function(o){
return parseInt(o.getAttribute("tscbState"))
}
}
Применение:
- tscb $ .setState () используется для инициализации или переопределить настройки для флажка
- tscb $ .toggleOnClick () используется при щелчке элемента для переключения к следующему состоянию
- tscb $ .getState (), чтобы получить текущее состояние
- tscb $ .getNextState (), чтобы получить следующее состояние
Его удивительно, насколько эффективен тройное состояние флажок может быть при сохранении компактной UI, позволяя для уникальной функциональности фильтрации. Его очень эффективен для динамической фильтрации результатов поиска, где фильтр может быть True / False / Off с помощью только одного элемента управления