Флажки/радиокнопки не отвечают в расширяемой форме списка

Question

Редактировать ответ: ОК, похоже, эта проблема возникла раньше. Кажется, что ключ находится в операторе return false; в функции js prepareList. Я прокомментировал это, и теперь код работает нормально. Для получения дополнительной информации и более полного ответа, here является предыдущей версией вопроса.

EDIT: Вот jsfiddle, который воспроизводит ошибку.

Я пытаюсь сделать форму, используя код расширяемого списка, найденный here, а мои флажки и переключатели либо не отвечают, либо глючат. Они оба знают, что их прижимают, они меняются на депрессию, когда я нажимаю на них, но они не обновляют свою ценность. Для радиокнопки я могу щелкнуть один, и он работает, но потом остальные в этой группе перестают отвечать. У меня есть фиктивная страница php, чтобы просто распечатать результаты формы, но она, похоже, не получает никаких данных. ПРИМЕЧАНИЕ. Это мой первый проект веб-сайта, может быть что-то совершенно очевидное, что я просто отсутствую. Вот образец HTML:

<div id="listContainer"> 
     <div class="listControl"> 
      <a id="expandList">Expand All</a> 
      <a id="collapseList">Collapse All</a> 
     </div> 
     <form id="ColForm" action="Table.php" method="post"> <!--Organized list of collumns and filter options--> 
     <ul id="expList"> 
     <li>Section heading 
      <ul> 
      <li><input type="checkbox" name="ColSelect" value="Name" form="ColForm"> <!--If checked, collumn will be included in final table--> Name 
       <ul> 
       <li> 
        <input type="text" name="Name" form="ColForm"><br> <!--filter parameter input--> 
       </li> 
       </ul> 
      </li> 
      <li><input type="checkbox" name="ColSelect" value="RA,Dec" form="ColForm">Another collumn 
       <ul> 
       <li> 
        <input type="radio" name="PoSearch" value="Range" form="ColForm">Radio button to select form type for this section<br> 
        <i>I have an option here 
        <input type="radio" name="Degs" value="Dec" form="ColForm">Option 1 
        <input type="radio" name="Degs" value="Hex" form="ColForm">Option 2</i><br> 
        Text input 1<br> 
        <input type="text" name="RA" form="ColForm">deg<br> 
        Text input 2<br> 
        <input type="text" name="Dec" form="ColForm">deg<br> 
        <input type="radio" name="PoSearch" value="Area" form="ColForm">Second form option<br> 
        <i>Text input A</i><br> 
        <input type="text" name="Area" form="ColForm"><br> 
       </li> 
       </ul>  
      </li> 
      </ul> 
     </li> 
     </ul> 
    <input type="submit" value="submit" form="ColForm"> 
    </form> 
</div> 

А вот Javascript для функции списка:

/**************************************************************/ 
/* Prepares the cv to be dynamically expandable/collapsible */ 
/**************************************************************/ 
function prepareList() { 
    $('#expList').find('li:has(ul)') 
    .click(function(event) { 
     if (this == event.target) { 
      $(this).toggleClass('expanded'); 
      $(this).children('ul').toggle('medium'); 
     } 
     return false; 
    }) 
    .addClass('collapsed') 
    .children('ul').hide(); 

    //Create the button functionality 
    $('#expandList') 
    .unbind('click') 
    .click(function() { 
     $('.collapsed').addClass('expanded'); 
     $('.collapsed').children().show('medium'); 
    }) 
    $('#collapseList') 
    .unbind('click') 
    .click(function() { 
     $('.collapsed').removeClass('expanded'); 
     $('.collapsed').children().hide('medium'); 
    }) 
}; 

$(document).ready(function() { 
    prepareList() 
}); 

И соответствующий CSS: #listContainer { маржа-топ: 15px; }

#expList ul, li { 
    list-style: none; 
    margin:0; 
    padding:0; 
    cursor: pointer; 
} 
#expList p { 
    margin:0; 
    display:block; 
} 
#expList p:hover { 
    background-color:#121212; 
} 
#expList li { 
    line-height:140%; 
    text-indent:0px; 
    background-position: 1px 8px; 
    padding-left: 20px; 
    background-repeat: no-repeat; 
} 

/* Collapsed state for list element */ 
#expList .collapsed { 
    background-image: url(../img/collapsed.png); 
} 
/* Expanded state for list element 
/* NOTE: This class must be located UNDER the collapsed one */ 
#expList .expanded { 
    background-image: url(../img/expanded.png); 
} 
#expList { 
    clear: both; 
} 

Answer 1

Проблема здесь с event.preventDefault() в вашем коде. Он удерживает флажки/переключатели от поведения по умолчанию. Удаление этой записи позволит входным тегам функционировать нормально. Но они больше не будут запускать функции расширения и сглаживания, которые вы ищете.

Вам нужно будет изменить свой JS, чтобы также прослушать щелчок на флажках. Вот несколько подобных ситуаций, которые могут помочь вам:

making on-click events work with checkboxes

clicking on a div to check/uncheck a checkbox