Форум

len-in · #1 (**permalink**) 16.01.2013, 19:46

Здравствуйте!
Помогите с фильтром, задача состоит такова:
нужно получить значение по выбранным категориям, категории выбирать можно с помощью чекбоксов, допустим их есть 3, а так же 4-я "все категории".
Основная сложность в том, что:
1. Когда выбрано 3-и категории, должны пропасть галочки на них и появится на "все категории". (реализовано)
2. Когда выбрано "все категории" и человек выбрал одну из 3-ех, галочка пропадает с "все категории", и стоит только на выбранной(ных). (реализовано, но из-за этого куска не работает пункт 3)
3. ПРОБЛЕМА! Когда выбрано "все категории" остальные галочки должны пропасть!
вот кусок скрипта

function union_chbox_orientations() {
        values_orientations='';
        test='';
        var chbox_activ_count = $( "input:checked" ).length - 1;
        for (i = 0; i < 4; i++) {
            if (document.getElementById('box_orientation'+i).checked) {
                values_orientations = values_orientations+document.getElementById('box_orientation'+i).value+'&';
            }
            //если выбраны все, убрать галочку с всех и поставить на "все файлы"
            if (chbox_activ_count == 3) {   
                values_orientations = document.getElementById('box_orientation'+0).value+'&';
                document.getElementById('box_orientation'+0).checked = true;
                for (i = 1; i < 4; i++) {
                    document.getElementById('box_orientation'+i).checked = false;
                }
            }
        }
        for (i = 1; i < 4; i++) {   // если выбрано "все ориентации" и нажата определённая, то убирает все ориентации
            if (document.getElementById('box_orientation'+i).checked && document.getElementById('box_orientation'+0).checked == true) {
                document.getElementById('box_orientation'+0).checked = false;
                values_orientations = document.getElementById('box_orientation'+i).value+'&';
            }
        }
        //alert (values_orientations);
        return (true);
    }

Пример задачи взят из поиска http://www.istockphoto.com/.
Подскажите как это можно реализовать... Заранее благодарен

Deff · #2 (**permalink**) 16.01.2013, 19:56

len-in,
Выдайте код для необходимых HTML элементов

len-in · #3 (**permalink**) 16.01.2013, 20:11

<html>
<head>
<title>page</title>
<script type="text/javascript">
function union_chbox_orientations() {
        values_orientations='';
        test='';
        for (i = 0; i < 4; i++) {
            if (document.getElementById('box_orientation'+i).checked) {
                values_orientations = values_orientations+document.getElementById('box_orientation'+i).value+'&';
            }
            //если выбраны все, убрать галочку с всех и поставить на "все файлы"
            if (document.getElementById('box_orientation'+1).checked && document.getElementById('box_orientation'+2).checked && document.getElementById('box_orientation'+3).checked) {   
                values_orientations = document.getElementById('box_orientation'+0).value+'&';
                document.getElementById('box_orientation'+0).checked = true;
                for (i = 1; i < 4; i++) {
                    document.getElementById('box_orientation'+i).checked = false;
                }
            }
        }
        for (i = 1; i < 4; i++) {   // если выбрано "все ориентации" и нажата определённая, то убирает все ориентации
            if (document.getElementById('box_orientation'+i).checked && document.getElementById('box_orientation'+0).checked == true) {
                document.getElementById('box_orientation'+0).checked = false;
                values_orientations = document.getElementById('box_orientation'+i).value+'&';
            }
        }
        return (true);
    }
</script>
</head>
<body>
<div class="conteiner_orientations">
<p>Orientation:</p>
<input type='checkbox' name='name' value='all orientations' id='box_orientation0' onClick='return union_chbox_orientations()'><img src='/'/>
	<label for='box_orientation0'>all orientations</label><br>
<input type='checkbox' name='name' value='vertical' id='box_orientation1' onClick='return union_chbox_orientations()'><img src='/'/>
	<label for='box_orientation1'>vertical</label><br>
<input type='checkbox' name='name' value='horizontal' id='box_orientation2' onClick='return union_chbox_orientations()'><img src='/'/>
	<label for='box_orientation2'>horizontal</label><br>
<input type='checkbox' name='name' value='square' id='box_orientation3' onClick='return union_chbox_orientations()'><img src='/'/>
	<label for='box_orientation3'>square</label><br>
</div>
</body>
</html>

Deff · #4 (**permalink**) 16.01.2013, 21:12

len-in,
Если чел выбрал две из категорий (не all) - что должно быть ? (может оставляем последнюю?( или обе ?)

рони · #5 (**permalink**) 16.01.2013, 21:36

len-in,
Вариант...

<!DOCTYPE HTML>
<html>
<head>
<title>page</title>
<script type="text/javascript">
var test = 0 ;
function union_chbox_orientations(a) {
    "box_orientation0" != a.id && (a.checked ? test++ : test--);
    if ("box_orientation0" == a.id && a.checked || 3 == test) {
        for (i = 0; 4 > i; i++) document.getElementById("box_orientation" + i).checked = 0 < i ? !1 : !0;
        test = 0
    } else document.getElementById("box_orientation0").checked = !1;
    return !0
};
</script>
</head>
<body>
<div class="conteiner_orientations">
<p>Orientation:</p>
<input type='checkbox' name='name' value='all orientations' id='box_orientation0' onClick='return union_chbox_orientations(this)'><img src='/'/>
	<label for='box_orientation0'>all orientations</label><br>
<input type='checkbox' name='name' value='vertical' id='box_orientation1' onClick='return union_chbox_orientations(this)'><img src='/'/>
	<label for='box_orientation1'>vertical</label><br>
<input type='checkbox' name='name' value='horizontal' id='box_orientation2' onClick='return union_chbox_orientations(this)'><img src='/'/>
	<label for='box_orientation2'>horizontal</label><br>
<input type='checkbox' name='name' value='square' id='box_orientation3' onClick='return union_chbox_orientations(this)'><img src='/'/>
	<label for='box_orientation3'>square</label><br>
</div>
</body>
</html>

len-in · #6 (**permalink**) 16.01.2013, 21:55

Вот, то что нужно! Огромное спасибо.

Deff · #7 (**permalink**) 16.01.2013, 22:12

<html>
<head>
<title>page</title>
<script type="text/javascript">
var arrCheck=[0,0,0,0];
function union_chbox_orientations(a) {
        var i= +a.id.replace(/^\D*/,'');
        arrCheck[i]=+1*(a.checked==true);
        if(!arrCheck[i])return false;

        var testKey ="" + arrCheck.join(''); //alert(testKey)
        if(i==0)arrCheck=[1,0,0,0];
        if(i!=0)arrCheck[0]=0;
        if(testKey=='0111'||testKey=='1111')arrCheck=[1,0,0,0];


        for (i = 0; i < arrCheck.length; i++) {
            document.getElementById('box_orientation'+i).checked=(arrCheck[i]==1);
        }
        return true;


    }
</script>
</head>
<body>
<div class="conteiner_orientations">
<p>Orientation:</p>
<input type='checkbox' name='name' value='all orientations' id='box_orientation0' onclick='union_chbox_orientations(this)'><img src='/'/>
	<label for='box_orientation0'>all orientations</label><br>
<input type='checkbox' name='name' value='vertical' id='box_orientation1' onclick='union_chbox_orientations(this)'><img src='/'/>
	<label for='box_orientation1'>vertical</label><br>
<input type='checkbox' name='name' value='horizontal' id='box_orientation2' onclick='union_chbox_orientations(this)'><img src='/'/>
	<label for='box_orientation2'>horizontal</label><br>
<input type='checkbox' name='name' value='square' id='box_orientation3' onclick='union_chbox_orientations(this)'><img src='/'/>
	<label for='box_orientation3'>square</label><br>
</div>
</body>
</html>

Пытаюсь упрозрачнить кодирование

Форум

Справочник

Discord чат

Курсы javascript