在選中和未選中的選擇框上隱藏和顯示特定表單項？

Question

我正在使用下面給定的代碼來隱藏和顯示特定的表單項，但這不起作用請讓我知道我的代碼中缺少什么？

HTML：

<input id="id_code_col" type="checkbox" name="code_col"></input>

腳本：

$(document).ready(function(){
var selectBox = jQuery('#id_code_col');
selectBox.change(function () {
    if ($(this).val() == '1') {
      $('#id_FullColumn').show();
      $('#id_FirstColumn').hide();
      $('#id_SecondColumn').hide();

    }
    else {
      $('#id_FullColumn').hide();
      $('#id_FirstColumn').show();
      $('#id_SecondColumn').show();
    }
});
});

注意：我無法在 html 中添加或刪除任何內容。 我所要做的就是用腳本來做。 請幫助！

Answer 1

您可以使用.is()和:checked選擇器來檢查您的復選框是否被選中，因此請嘗試使用：

if ($(this).is(':checked')) {

或純 javascript 使用：

if(this.checked)

代替：

if ($(this).val() == '1') {

Answer 2

selectBox.change(function () {
    if ($(this).is(':checked')) {
      $('#id_FullColumn').show();
      $('#id_FirstColumn').hide();
      $('#id_SecondColumn').hide();

    }
    else {
      $('#id_FullColumn').hide();
      $('#id_FirstColumn').show();
      $('#id_SecondColumn').show();
    }
});

Answer 3

這樣做：

if(this.checked)
{
// checked
}

else
{
// unchecked
}

對於您的情況：

   $(document).ready(function(){
    var selectBox = jQuery('#id_code_col');
    selectBox.change(function () {
        if (this.checked) {
          $('#id_FullColumn').show();
          $('#id_FirstColumn').hide();
          $('#id_SecondColumn').hide();

        }
        else {
          $('#id_FullColumn').hide();
          $('#id_FirstColumn').show();
          $('#id_SecondColumn').show();
        }
    });
    });

Answer 4

改變這個

 if ($(this).val() == '1') {

對此

 if (this.checked) {

---

因為您不必檢查值是否為 1，因為您的復選框沒有任何值設置為 1。

因此，您必須使用已checked方法checked該復選框的狀態。

Answer 5

$(document).ready(function () {
            var selectBox = jQuery('#id_code_col');
            selectBox.change(function () {
                if (this.checked) {
                    alert("checked");
                }
                else {
                    alert("unchecked");
                }
            });
        });

Answer 6

          $(function(){
                $('#id_code_col').change(function(){
                  if($(this.checked)){
                   alert('checked');
                    }else{
                     alert('unchecked');
                  }
                 });
           });