JQuery показать/скрыть HTML содержимое при использовании флажок

Question

Я пытаюсь показать/скрыть содержимое HTML с помощью JQuery ... вот код:

HTML:

<table width="1077" border="0" cellspacing="4" cellpadding="4"> 
    <tr> 
     <td height="100%">&nbsp;</td> 
     <td id="headerText"> 
      <h2>enter details below</h2> 
     </td> 
     <td width="17" rowspan="3" valign="top" id="headerText"></td> 
     <td id="headerText"> 
      <h2 id="section"> test data</h2> 
     </td> 
    </tr> 
    <tr> 
     <td width="1" height="100%">&nbsp;</td> 
     <td width="531" id="bodyText">more information</td> 
     <td width="476" id="bodyText"></td> 
    </tr> 
    <tr> 
     <td height="150">&nbsp;</td> 
     <td valign="top"> 
      <table width="100%" border="0" cellspacing="1" cellpadding="1"> 
       <tr> 
        <td width="7%" id="bodyText2"> 
         <label for="zip2"> 
          <input type="checkbox" name="check_medical2" id="check_medical2"> 
         </label> 
        </td> 
        <td width="93%"> 
         <label for="textfield3"></label> 
         <label for="people3" id="bodyText">section 1</label> 
        </td> 
       </tr> 
       <tr> 
        <td height="10" colspan="2" id="bodyText2"></td> 
       </tr> 
       <tr> 
        <td id="bodyText2"> 
         <input type="checkbox" name="check_dental2" id="check_dental2"> 
        </td> 
        <td id="bodyText">section 2</td> 
       </tr> 
       <tr> 
        <td height="10" colspan="2" id="bodyText5"></td> 
       </tr> 
       <tr> 
        <td id="bodyText2"> 
         <input name="check_life_insurance2" type="checkbox" id="check_life_insurance2"> 
        </td> 
        <td id="bodyText">section 3</td> 
       </tr> 
      </table> 
      <table width="100%" border="0" cellspacing="2" cellpadding="2"> 
       <tr> 
        <td width="30%"></td> 
        <td width="43%">&nbsp;</td> 
        <td width="27%">&nbsp;</td> 
       </tr> 
      </table> 
      <p>&nbsp;</p> 
     </td> 
     <td valign="top"> 
      <br> 
     </td> 
    </tr> 
</table><s:submit value="submit" name="submit" /> 

JQuery:

$('#check_life_insurance2').on("click", function() { 
    if ($('#check_life_insurance2').prop("checked")) { 
     $('#section').show(); 
    } else { 
     $('#section').hide(); 
    } 
}); 

JS Fiddle.

может кто-нибудь скажет мне, где я иду не так.

если установлен флажок в секции 3. Должны быть отображены тестовые данные. но по какой-то причине он терпит неудачу.

спасибо за вашу помощь

Answer 1

Ваш код должен выглядеть следующим образом ...

$('#check_life_insurance2').on("click", function() { 

    if ($(this).prop("checked")) { 
     $('#section').show(); 
    } 
    else { 
     $('#section').hide(); 
    } 

}); 

Answer 2

У вас есть ошибка синтаксиса в вашем JavaScript. Запуск JSHint против вашего JSFiddle открывает дополнительную закрывающую скобку, скобки и точку с запятой '});'. Удалите эту синтаксическую ошибку, и вы увидите сообщение заголовка «тестовые данные», когда флажок установлен и скрыть, когда он не установлен. Кроме того, поскольку кажется, что вы хотите, чтобы «тестовые данные» были скрыты, когда флажок не установлен, вам нужно либо скрыть его, либо сначала проверить соответствующее поле.

Here is a JSFiddle вашего кода с заголовком первоначально скрытой и функции мыши переработан, чтобы использовать .toggle функцию и здесь соответствующие части:

<h2 style="display:none" id="section"> test data</h2> 


$('#check_life_insurance2').on("click", function() { 
     $('#section').toggle($('#check_life_insurance2').prop("checked")); 
}); 

Answer 3

Меняйте JS как это:

$('#check_life_insurance2').on("click", function() { 
     if ($(this).prop("checked")) { 
      $('#section').show(); 
     } 
     else { 
      $('#section').hide(); 
     } 
    }); 

и если Вы хотите, чтобы скрыть от начала использовать это на CSS:

#section{ 
    display:none; 
} 

Вот это работают demo

Answer 4

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

$('#check_life_insurance2').on("click", function() { 
    var checked = $(this).prop("checked"); 
    var toToggle = $('#section'); 
    checked ? toToggle.hide() : toToggle.show(); 
}); 

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

Answer 5

Я удалил эту часть

"<s:submit value="submit" name="submit" />" 

Это, кажется, работает. Не уверен, но пространство имен «s» может быть противоречивым здесь.

Вот дополненная скрипку

jsfiddle.net/hVWYg/12/