2012-07-02 2 views
1

Я немного новичок в javascript. У меня есть набор флажков для html-формы. Эти флажки динамически генерируются из сценария python. Последний флажок имеет «N/A», я хочу сделать так, чтобы, если какой-либо из других флажков отмечен, флажок «N/A» автоматически исчезнет. Если флажок N/A установлен, остальные исчезают. И, конечно, если я сниму флажки, произойдет обратное. Я знаю, что мне нужно назначить разные поля ввода разными идентификаторами, поэтому javascript может их идентифицировать, но я не уверен, как написать javascript, чтобы сделать фактическое исчезающее действие. Спасибо.элементы формы исчезают с javascript

изменить ;; Некоторый динамический код питона:

print "<blockquote><strong>Labels:</strong><br/>" 
for elem in output_list: 
    if elem not in non_delete_list: 
     print "<input type=\"checkbox\" name=\"remove_cd\" value=\"" + elem + "\" />" + elem + "<br/>" 
print "<input type=\"checkbox\" name=\"remove_cd\" value=\"r_on\" />N/A:" 
print_reason_list() 
print "<font color=\"#cc0000\">Reason Required</font><hr/>" 

Так в принципе, ничего с значением = Эль частью динамичен, конечный флажок N/A (значение = «r_on»).

редактировать 2:

Так что я смог получить коробки исчезнуть благодаря @Ankit (используя документ .... style.display = "нет"). Проблема, с которой я сталкиваюсь, заключается в том, что после проверки флажка соответствующий идентификатор становится ПОСТОЯННО скрытым. Для того, чтобы исправить это, я сделал скрытие и функцию, и моя OnClick выглядит следующим образом:

"onclick=if(this.checked){hide("NA")}else{unhide("NA")}" 

И это позволяет мне снимите флажки и вызвать соответствующие метки, чтобы вновь появиться. Однако я столкнулся с новой проблемой. С помощью флажков value elem. Если я проверю два блока, а затем снимите флажок с одного из полей, снова появится «NA». Я хочу, чтобы он оставался скрытым, если есть флажок «elem», который проверяется. В принципе, мне нужно пересканировать все флажки, чтобы увидеть их текущие состояния (я думаю). Как я могу это сделать?

+0

Вы используете прямой JavaScript или используете фреймворк JavaScript, например jQuery? –

+0

Можете ли вы разместить HTML-код? – mck89

+0

Прямой javascript. – de1337ed

ответ

2

Вы можете включить/отключить HTML элемент через JavaScript с:

document.getElementById('<the id of your checkbox here>').disabled = true; 

для вашего случая просто поставить Div тег вокруг динамических флажков и добавить/удалить, что Див на основе ваших потребностей.

Пример: -

print "<blockquote><strong>Labels:</strong><br/>" 

for elem in output_list: 
    if elem not in non_delete_list: 
     print "<div id=\"listBox\" >" 
     print "<input type=\"checkbox\" name=\"remove_cd\" value=\"" + elem + "\" onclick=\"if(this.checked){myFunction("upperChkBoxes")}\" />" + elem + "<br/>" 
     print "</div>" 
print "<input type=\"checkbox\" name=\"remove_cd\" value=\"r_on\" onclick=\"if(this.checked){myFunction("NA")}\" />N/A:" 
print_reason_list() 
print "<font color=\"#cc0000\">Reason Required</font><hr/>" 


function myFunction(par){ 
// put your logic of add/remove here based on par value as "upperChkBoxes" or "NA" 
} 

Надежда, что помогает.

+0

Так что в принципе, я бы поставил что-то подобное в javascript-функции в заголовке. А потом назовите его чем-то вроде «onClick»? Если бы я снял флажок, перезапустим ли он его? – de1337ed

+0

Отправленный код, который должен помочь. Вам нужно поставить логику в соответствии с вашими потребностями в myFunction (.). Помните о различии между использованием onclick и onchange на флажках (и переключателях). OnClick происходит ПЕРЕД заменой, поэтому, если вы нажмете флажок, который в настоящий момент установлен, onclick увидит флажок, как отмечено, и onchange увидит его как непроверенный. – Ankit

+0

Это меня достало довольно далеко. Я сделал редактирование выше с новой проблемой. Вы можете посмотреть на это? Благодарю. – de1337ed

2

Вы можете показать или скрыть HTML элемент не используя CSS свойство отображения None

, чтобы заставить его исчезнуть

document.getElementById('<the id of your checkbox here>').style.display = "none"; 

или показать назад

document.getElementById('<the id of your checkbox here>').style.display = "block"; 

Если вы используете JQuery вы могли легко использовать для достижения тех же

$('#id of the checkbox').hide() or $('#id of the checkbox').show() 
+0

Я немного запутался в том, как сделать это нажатием на действие, чтобы различать, нужно ли вызывать функцию исчезновения или функцию отображения. Я бы использовал атрибут onSelect = ...? – de1337ed

+0

Я думаю, вы должны использовать onclick вместо onselect – Ravi

Смежные вопросы