Question

我使用下面给出的代码来隐藏和显示特定的表单项，但是这并不能让我知道我的代码中缺少什么？

HTML：

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

SCRIPT：

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

N.B：我无法在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方法检查该复选框的状态。

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

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

6 个答案: