2017-01-05 1 views
1

Я хочу, чтобы проверяемые флажки быть непроверенными по нажатию другой кнопки:снимите флажок проверяемых флажков на другую кнопку мыши

Ниже приводится HTML

<input type="checkbox" name="checkb" id="Agent" value="Agent"> type=Agent 
<br /> 

    <input type="checkbox" name="checkb" id="Customer" value="Customer"> type=Customer 
<br /> 

    <input type="checkbox" name="checkb" id="Phone" value="Phone"> type=Phone 
<br /> 

    <input type="checkbox" name="checkb" id="ID_Card" value="ID_Card"> type=ID_Card 
<br /> 

<input type=datetime id="Start_Date" value="" placeholder="Start_Date" /> 
<input type=datetime id="End_Date" value="" placeholder="End_Date" /> 
<button id="date"> 
    Interval 
</button> 

При нажатии на Interva л если какие-либо флажки отмечены флажками, они должны быть сняты.

Ниже слушатель событие для кнопки Интервал:

  var check1 = document.getElementById("Agent"); 
var check2 = document.getElementById("Customer"); 
var check3 = document.getElementById("Phone"); 
var check4 = document.getElementById("ID_Card"); 


var newBtn = document.getElementById("date"); 
if (newBtn) { 
    newBtn.addEventListener("click", function() { 

    if (check1.checked) { 
     var ischecked1 = check1.checked; 

     check1.checked != ischecked1; 
    } 
    if (check2.checked) { 
     var ischecked2 = check2.checked; 

     check2.checked != ischecked2; 

    } 

    if (check3.checked) { 
     var ischecked3 = check3.checked; 

     check3.checked != ischecked3; 
    } 
    if (check4.checked) { 
     var ischecked4 = check4.checked; 

     check4.checked != ischecked4; 

    } 
    }); 
} 

Ниже код работает без каких-либо ошибок, но коробки не получают бесконтрольно, если они проверяются.

Ниже в fiddle

ответ

4

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

check1.checked != ischecked1; // this returns a boolean, doesn't do any assignment 

Вы хотите сделать это, чтобы переключить проверенное состояние:

check1.checked = !ischecked1; 

Same вещь для других флажков.

Там также нет необходимости создавать дополнительные переменные, вы можете просто сделать переключая и чтение непосредственно:

check1.checked = !check1.checked; 

Поскольку вы только переключая флажки, когда они проверяются, вы можете просто сразу установить их false также.

if (check1.checked) check1.checked = false; 

Вместо того, чтобы if заявления, вы можете использовать массив итераций, чтобы сделать переключая:

[check1, check2, check3, check4].forEach(check => { 
    if (check.checked) { 
    check.checked = false; 
    } 
}); 

// or query the checkboxes directly and do the same 
[...document.querySelectorAll('input[type="checkbox"]')].forEach(check => { 
    if (check.checked) { 
    check.checked = false; 
    } 
}); 
+1

стоит отметить, но не стоит отвечать тем, что это прекрасно, а также может быть улучшено, если поместить в каком-то каждый цикле с классом специфический связанным с этой группой или использовать имя проверки , Но отличный ответ. –

+0

, когда я пытаюсь локально, а не в jsfiddle, это терпит неудачу с помощью Uncaught TypeError: невозможно прочитать свойство 'checked' of null at forEach.check (http://172.31.179.196:5000/static/final.js:457:18) at Array.forEach (native) at HTMLSelectElement.onSelectChange –

+0

Это потому, что один из элементов - «null», что означает, что вы либо помещаете неверный идентификатор в 'getElementById', чтобы он не мог найти элемент, либо вы указали правильный идентификатор но забыл добавить элемент в DOM. – nem035

1

Взглядами него вы просто хотите, чтобы снять все на нажатие кнопки

вам может только сделать это

var newBtn = document.getElementById("date"); 
if (newBtn) { 
    newBtn.addEventListener("click", function() { 
     document.getElementById("Agent").checked = 
     document.getElementById("Customer").checked = 
     document.getElementById("Phone").checked = 
     document.getElementById("ID_Card").checked = false; 
    }); 
} 
1

Ваша ошибка в этой линии:

check1.checked != ischecked1; 

Это на самом деле означает «сравнить, если check1.checked не равно ischecked1».

Самое простое решение было бы удалить, если заявление и просто сделать это:

check1.checked = !check1.checked 

Это означает «набор check1.checked в противоположность check1.checked».

Поскольку все флажки имеют одно и то же имя, вы также можете собрать все флажки, запросив их по имени и использовать цикл, чтобы пройти через них.Небольшой пример:

// Collect all checkboxes with a CSS selector that matches all input 
// elements with a name attribute that's equal to "checkb" 
var checkboxes = document.querySelectorAll('input[name="checkb"]'); 

var newBtn = document.getElementById("date"); 
if (newBtn) { 
    newBtn.addEventListener("click", function() { 
    // this is a for loop, it will run for as long as i 
    // is smaller than the amount of found checkboxes (checkboxes.length) 
    for(var i = 0; i < checkboxes.length; i++) { 
     // Get the checkbox from the checkboxes collection 
     // collection[i] means get item from collection with index i 
     var checkbox = checkboxes[i]; 

     // Revert the .checked property of the checkbox 
     checkbox.checked = !checkbox.checked; 
    } 
    }); 
}