Выполнить действие при отмеченном флажке или не отмеченном событии в форме html

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

это мой флажок:

<form>
    syn<input type="checkbox" name="checkfield" id="g01-01"  onchange="doalert(this.id)"/>
</form>

и это мой script:

function doalert(id){
  if(this.checked) {
     alert('checked');
  }else{
     alert('unchecked');
  }
}

он просто предупреждает uncheched!! что это лучший способ сделать это.

Ответ 1

Мы можем сделать это с помощью JavaScript, не нужно jQuery. Просто передайте измененный элемент и пусть JavaScript обработает его.

HTML

<form id="myform">
    syn<input type="checkbox" name="checkfield" id="g01-01"  onchange="doalert(this)"/>
</form>

function doalert(checkboxElem) {
  if (checkboxElem.checked) {
    alert ("hi");
  } else {
    alert ("bye");
  }
}

Демо здесь

Ответ 2

Проблема заключается в том, как вы подключили слушателя:

<input type="checkbox" ...  onchange="doalert(this.id)">

Inline-прослушиватели эффективно завернуты в функцию, которая вызывается с элементом как это. Затем эта функция вызывает функцию doalert, но не устанавливает ее так, чтобы она по умолчанию была глобальным объектом (окно в браузере).

Поскольку объект window не имеет проверенного свойства, this.checked всегда разрешает false.

Если вы хотите, чтобы это внутри doalert являлось элементом, присоедините слушателя с помощью addEventListener:

window.onload = function() {
  var input = document.querySelector('#g01-01');
  if (input) {   
    input.addEventListener('change', doalert, false);
  }
}

Или если вы хотите использовать встроенный прослушиватель:

<input type="checkbox" ...  onchange="doalert.call(this, this.id)">

Ответ 3

<form>
    syn<input type="checkbox" name="checkfield" id="g01-01" />
</form>

JS:

$('#g01-01').on('change',function(){
    var _val = $(this).is(':checked') ? 'checked' : 'unchecked';
    alert(_val);
});

Ответ 4

Пробовали ли вы использовать событие изменения JQuery?

$("#g01-01").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

Затем вы также можете удалить onchange="doalert(this.id)" из своего флажка:)

Edit:

Я не знаю, используете ли вы JQuery, но если вы еще не используете его, вам нужно будет разместить на своей странице script, чтобы вы могли его использовать:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Ответ 5

Если вы отлаживаете свой код с помощью инструментов разработчика, вы заметите, что this ссылается на объект окна, а не на элемент управления ввода. Рассмотрите возможность использования переданного в id для получения ввода и проверьте значение checked.

function doalert(id){
  if(document.getElementById(id).checked) {
    alert('checked');
  }else{
    alert('unchecked');
  }
}