[javascript] 자바 스크립트 확인란 onChange

Program / 글쓴이

양식에 확인란이 있으며 다음 시나리오에 따라 작동하도록하고 싶습니다.

  • 누군가 확인하면 텍스트 필드 ( totalCost) 의 값을 로 설정해야합니다 10.
  • 그런 다음 돌아가서 선택을 취소하면 함수 calculate()는 totalCost다른 매개 변수에 따라 값을 양식으로 설정합니다.

따라서 기본적으로 확인란을 선택할 때 한 가지 작업을 수행하고 선택 해제하면 다른 작업을 수행하는 부분이 필요합니다.

답변

function calc()
{
  if (document.getElementById('xxx').checked)
  {
      document.getElementById('totalCost').value = 10;
  } else {
      calculate();
  }
}

HTML

<input type="checkbox" id="xxx" name="xxx" onclick="calc();"/>

답변

순수한 자바 스크립트 :

const checkbox = document.getElementById('myCheckbox')

checkbox.addEventListener('change', (event) => {
  if (event.target.checked) {
    alert('checked');
  } else {
    alert('not checked');
  }
})
My Checkbox: <input id="myCheckbox" type="checkbox" />

스 니펫 확장

답변

jQuery를 사용하는 경우 다음을 제안 할 수 있습니다. 참고 : 여기에 몇 가지 가정을했습니다.

$('#my_checkbox').click(function(){
    if($(this).is(':checked')){
        $('input[name="totalCost"]').val(10);
    } else {
        calculate();
    }
});

답변

확인란을 클릭 할 때마다 실제로 변경되므로 onclick 이벤트를 사용하십시오.

답변

다음 솔루션은 jquery를 사용합니다. id의 확인란이 있다고 가정합니다 checkboxId.

const checkbox = $("#checkboxId");

checkbox.change(function(event) {
    var checkbox = event.target;
    if (checkbox.checked) {
        //Checkbox has been checked
    } else {
        //Checkbox has been unchecked
    }
});

답변

HTML :

<input type="checkbox" onchange="handleChange(event)">

JS :

function handleChange(e) {
     const {checked} = e.target;
}

답변

#가 아닌 id로 확인란을 참조하십시오. # change 속성을 사용하는 대신 onclick 속성에 함수를 할당하십시오.

var checkbox = $("save_" + fieldName);
checkbox.onclick = function(event) {
    var checkbox = event.target;

    if (checkbox.checked) {
        //Checkbox has been checked
    } else {
        //Checkbox has been unchecked
    }
};