javascript - 在选中和未选中的选择框中隐藏和显示特定的表单项？

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

这样做:

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();
        }
    });
    });