Форум

blacklordi · #1 (**permalink**) 16.02.2012, 16:59

Есть 5 чекбоксов надо зделать так чтобы при нажатии на первый отмечался и 3тий. Я оч слаб в етом.
от что нарыл

<html>
<head>
<title></title>
<script type="text/javascript">
if (!Array.prototype.indexOf)
Array.prototype.indexOf = function(value) {
for (var i = 0; i < this.length; i++)
if (this[i] === value)
return i;
return -1;
}
function checkIt() {
var arr = document.getElementById('checkedItems').value.spli t(/,\s*/);
var items = document.getElementById('items');
var checkboxes = items.getElementsByTagName('input');
for (var i = 0; i < checkboxes.length; i++)
checkboxes[i].checked = arr.indexOf(checkboxes[i].value) != -1;
}
window.onload = function() {
var itemsEl = document.getElementById('items');
for (var i = 1; i < 10; i++)
itemsEl.innerHTML += '<input name="checkbox" type="checkbox" value="' + i + '">' + i + '<br>\n';
}
</script>
<style type="text/css">
.toolbox {
position: fixed; float: left; top: 50px; left: 100px;
border: solid 1px Silver; background: #f5f5f5; padding: 5px;
}
.toolbox span { cursor: pointer; }
</style>
</head>
<body>
<div class="toolbox">Values <input id="checkedItems" type="text" value="1,3" size="10">
<span onclick="checkIt()">Check!</span></div>
<div id="items">
</div>
</body>
</html>

Shaci · #2 (**permalink**) 16.02.2012, 17:40

<html>
    <head>        
        <style type="text/css">
            .checkbox_container {
                background-color:#0066cc;
                width:300px;
                border:solid 2px;
            }
            .checkbox_container legend {
                font-weight: bold;
                color:red;
                font-size:large;
            }
        </style>
    </head>
    <body>
        <fieldset class ="checkbox_container">
            <legend>5 чекбоксов</legend>
            <p>
                <input type ="checkbox"> чекбокс № 1</br>
                <input type ="checkbox"> чекбокс № 2</br>
                <input type ="checkbox"> чекбокс № 3</br>
                <input type ="checkbox"> чекбокс № 4</br>
                <input type ="checkbox"> чекбокс № 5</br>
            </p>
        </fieldset>
        <script type="text/javascript">            
            var checkboxes = document.body.children[0].getElementsByTagName("input");
           checkboxes[0].onclick = function() {
               checkboxes[2].setAttribute("checked", "checked");
           }
        </script>
    </body>
</html>

GuardCat · #3 (**permalink**) 16.02.2012, 17:44

Shaci, у меня срабатывает только один раз, т.е. если снять все флажки и опять кликнуть первый чекбокс, то третий не реагирует. Так задуманно или косяк? (Chrome 17)

Shaci · #4 (**permalink**) 16.02.2012, 17:48

Сообщение от GuardCat

Shaci, у меня срабатывает только один раз, т.е. если снять все флажки и опять кликнуть первый чекбокс, то третий не реагирует. Так задуманно или косяк? (Chrome 17)

так надо было один раз, я дальше и не запаривался делать

GuardCat · #5 (**permalink**) 16.02.2012, 17:50

Ага, а если через свойство (checked = true), то многоразово работает. И понятно почему, кстати. Интересно =).

blacklordi · #6 (**permalink**) 17.02.2012, 14:45

От спасибо за помощь все работает как надо.
теперь к етому надо ищо добавить чтобы когда 1 и 3 чекбоксы включены остальные были недоступны))

</head>

<body>

<fieldset class ="checkbox_container">

<legend>5 чекбоксів</legend>

<p>

<input type ="checkbox"> чекбокс 1</br>

<input type ="checkbox"> чекбокс 2</br>

<input type ="checkbox"> чекбокс 3</br>

<input type ="checkbox"> чекбокс 4</br>

<input type ="checkbox"> чекбокс 5</br>

</p>

</fieldset>

<script type="text/javascript">

var checkboxes = document.body.children[0].getElementsByTagName("input");

checkboxes[0].onclick = function() {
if(checkboxes[0].checked == true) {
checkboxes[2].checked = true;
} else {
checkboxes[2].checked = false;
}

}

</script>

</body>

</html>

Shaci · #7 (**permalink**) 17.02.2012, 16:02

Сообщение от blacklordi

От спасибо за помощь все работает как надо.
теперь к етому надо ищо добавить чтобы когда 1 и 3 чекбоксы включены остальные были недоступны))

Возмите и экстраполируйте код на ваше ТЗ,это же не сложно, например вот так.

<html>
    <head>        
        <style type="text/css">
            .checkbox_container {
                background-color:#0066cc;
                width:300px;
                border:solid 2px;
            }
            .checkbox_container legend {
                font-weight: bold;
                color:red;
                font-size:large;
            }
        </style>
    </head>
    <body>
        <fieldset class ="checkbox_container">
            <legend>5 чекбоксов</legend>
            <p>
                <input type ="checkbox"> чекбокс № 1</br>
                <input type ="checkbox"> чекбокс № 2</br>
                <input type ="checkbox"> чекбокс № 3</br>
                <input type ="checkbox"> чекбокс № 4</br>
                <input type ="checkbox"> чекбокс № 5</br>
            </p>
        </fieldset>
        <script type="text/javascript">            
        
           var checkboxes = document.body.children[0].getElementsByTagName("input");
           var disableOtherChBx = function (){
               checkboxes[1].disabled = true;
               checkboxes[3].disabled = true;
               checkboxes[4].disabled = true;
           }
           var unDisableOtherChBx = function(){
               checkboxes[1].disabled = false;
               checkboxes[3].disabled = false;
               checkboxes[4].disabled = false;           
           }
           checkboxes[0].onclick = function() {
               if (this.checked) {
               checkboxes[2].checked = true;
               disableOtherChBx();
               }
               else {
               unDisableOtherChBx();
               }
           }
           checkboxes[2].onclick = function() {
               if (!this.checked) {
                 unDisableOtherChBx();
               }  
               else if(checkboxes[0].checked){
                 disableOtherChBx();
               }            
           }
        </script>
    </body>
</html>

Форум

Справочник

Discord чат

Курсы javascript