Скрыть элемент при нажатии на флажок

Я пытаюсь скрыть элемент при щелчке по галочке.Скрыть элемент при нажатии на флажок

Как-то не получилось -

HTML

<input type="checkbox" onchange="showAtidit()"> 
<p id="hidethis"> 
hide me 
</p>

function showAtidit($) 
{ 
    if ($(this).is(':checked')) 
    { 
     alert("not hide"); 
     document.getElementById("hidethis").style.display = 'block'; 
    } 
    else 
    { 
     alert("hide"); 
     document.getElementById("hidethis").style.display = 'none'; 
    } 
};

http://jsfiddle.net/wv97mpcp/108/

Что случилось?

Спасибо!

источник

2016-11-03 John Js

Вы redifining $ в 'showAtidit ($)' –

см комментарии ниже. Кстати - почему знак $ является проблемой? потому что он ждет параметра и не получил его? –

Потому что это используется jQuery. Теперь вы переопределили его как = undefined, поэтому больше не представляете библиотеку jQuery. –

Поскольку вы используете jquery, просто используйте toggle():

function showAtidit() 
{ 
    $('#hidethis').toggle(); 
}

Надеюсь, это поможет.

function showAtidit() 
 
{ 
 
    $('#hidethis').toggle(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" onchange="showAtidit()"> 
 
<p id="hidethis"> 
 
hide me 
 
</p>

источник

2016-11-03 09:26:24

http://jsfiddle.net/wv97mpcp/110/ - Вы имеете в виду вот это? не работает :( –

Нет @JohnJs вам следует использовать объект jquery '$ ('# hidethis')' вместо js object 'document.getElementById (" hidethis ")', чтобы вы могли использовать функцию jQuery 'toggle()' , иначе вы получите '.toggle не ошибка функции '. –

не может использовать .toggle в javascript :) – jogoe

удалить $ в параметрах функции, и проблема будет решена :)

function showAtidit() 
    { 
     if ($(this).is(':checked')) 
     { 
      alert("not hide"); 
      document.getElementById("hidethis").style.display = 'block'; 
     } 
     else 
     { 
      alert("hide"); 
      document.getElementById("hidethis").style.display = 'none'; 
     } 
    };

также может сделать это следующим образом:

function showAtidit() 
    { 
     if(document.getElementById('checkbox').checked) { 
      $("#hidethis").hide(); 
     } 
     else { 
      $("#hidethis").show(); 
     } 
    };

(нужно добавить идентификатор к CheckBox Тха)

источник

2016-11-03 09:25:51 jogoe

Я пробовал это, но он не показывал его обратно. –

[Здесь] (http://jsfiddle.net/wv97mpcp/111/) у вас есть решение. –

Пожалуйста, проверьте это. Я надеюсь, что это поможет

$('#sample').on("change",showAtidit) 
 
function showAtidit() 
 
\t { 
 
\t \t if ($(this).is(':checked')) 
 
\t \t { 
 
\t \t \t alert("not hide"); 
 
\t \t \t document.getElementById("hidethis").style.display = 'block'; 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t alert("hide"); 
 
     
 
\t \t \t document.getElementById("hidethis").style.display = 'none'; 
 
\t \t } 
 
\t };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t 
 
\t <input id="sample" type="checkbox"> 
 
<p id="hidethis"> 
 
hide me 
 
</p>

источник

2016-11-03 09:30:04 Chetan

Поскольку вы используете JQuery, переключение является путь, здесь я тестирую проверяемый:

$(function(){ 
 
    $("#toggleP").on("click",function() { 
 
    $("#hidethis").toggle(!this.checked); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input type="checkbox" id="toggleP"> 
 
<p id="hidethis"> 
 
hide me 
 
</p>

Если вы хотите посмотреть состояние при загрузке страницы:

$(function(){ 
    $("#toggleP").on("change",function() { 
    $("#hidethis").toggle(!this.checked); 
    }).change(); 
});

источник

2016-11-03 09:30:59 mplungjan

Использование $(this).toggle() является рискованным, поскольку вы можете гарантировать первоначальное состояние флажка, которое может привести к тому, что флажок не будет работать должным образом.

Фактическая проблема с вашим кодом - это $ в переменной функции.

Вы можете видеть, что это проблема, глядя в консоли на jsfiddle, которую вы опубликовали, нажав f12.

Настоящий пересмотренный JSFiddle, который будет работать.

http://jsfiddle.net/wv97mpcp/112/

источник

2016-11-03 09:31:04

Вы также можете проверить состояние – mplungjan

Скрыть элемент при нажатии на флажок

ответ

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