Как установить флажок внутри состояния Div с помощью JQuery?

Question

<table>
 <tbody>
    <tr>
     <td>
       <span>A_Group</span>
        <input type="hidden" value="1" id="ContentPlaceHolder1_rptFleet_hiddenFleetID_0" name="ctl00$ContentPlaceHolder1$rptFleet$ctl00$hiddenFleetID">
     </td>
     <td>
       <span name="chkGroupName">
        <input type="checkbox" onclick="jqCheckAll3(ContentPlaceHolder1_rptFleet_chkFleetName_0,1 );" name="ctl00$ContentPlaceHolder1$rptFleet$ctl00$chkFleetName" id="ContentPlaceHolder1_rptFleet_chkFleetName_0">
        <label for="ContentPlaceHolder1_rptFleet_chkFleetName_0">Select All</label>
       </span>
    </td>
   </tr>
   <tr>
    <td>
      <div id="1"><table cellspacing="5" cellpadding="5" id="ContentPlaceHolder1_rptFleet_chkListDevice_0">
         <tbody>
           <tr>
               <td>
                   <input type="checkbox" value="1" name="ctl00$ContentPlaceHolder1$rptFleet$ctl00$chkListDevice$0" id="ContentPlaceHolder1_rptFleet_chkListDevice_0_0_0">
                   <label for="ContentPlaceHolder1_rptFleet_chkListDevice_0_0_0">name 2</label>
               </td>
               <td>
                  <input type="checkbox" value="2" name="ctl00$ContentPlaceHolder1$rptFleet$ctl00$chkListDevice$1" id="ContentPlaceHolder1_rptFleet_chkListDevice_0_1_0">
                  <label for="ContentPlaceHolder1_rptFleet_chkListDevice_0_1_0">name 4</label>
               </td>
               <td>
                   <input type="checkbox" value="3" name="ctl00$ContentPlaceHolder1$rptFleet$ctl00$chkListDevice$2" id="ContentPlaceHolder1_rptFleet_chkListDevice_0_2_0">
                   <label for="ContentPlaceHolder1_rptFleet_chkListDevice_0_2_0">name 4</label>
               </td>
             </tr>
         </tbody>
        </table>
       </div>
      </td>
     </tr>
    </tbody>
</table>


function jqCheckAll3(id, pID) {
$("#" + pID + " :checkbox").attr('checked', $('#' + id).is(':checked'));
}

Я хотел бы установить / снять все флажки внутри div = 1, когда пользователь установил флажок, выбрать все

Answer 1

Я бы сложил это немного по-другому.Если я понимаю вашу проблему, вы пытаетесь либо установить все флажки, либо снять все флажки на основе одного флажка (выбрать все).

Перво-наперво, как отметил Ник, вам не следует использовать«1» как ваш идентификатор для div.а также вы можете использовать один оператор выбора, чтобы получить все флажки, которые являются дочерними по отношению к какому-либо определенному div, как этот ...

//notice I changed the name of the div to myDiv
var isChecked = $(this).attr('checked');
$('#myDiv input:checkbox').attr('checked', isChecked);

Это выбирает div по id, а затем любые входные данные, которые являются флажками.Я получаю проверенное значение флажка «выбрать все» (это вызывается для события onclick) и использую это значение для установки значений флажков.

Я бы также переместил привязку события ксобытие document.ready вместо выполнения вызова функции в разметке, но это всего лишь предпочтение.

Вот ссылка на все, что работает в jsfiddle

Надеюсь, что это поможет ...

Answer 2

Ваши идентификаторы должны быть заключены в кавычки, это:

onclick="jqCheckAll3(ContentPlaceHolder1_rptFleet_chkFleetName_0,1 );

должно быть:

onclick="jqCheckAll3('ContentPlaceHolder1_rptFleet_chkFleetName_0', '1');

Существуют и другие проблемы, такие как id="1" недействительно в HTML4,но ваша текущая проблема - отсутствие кавычек, приводящих к ошибке скрипта.

---

В целом проще было бы присвоить этому флажку класс вместо CssClass, например class="checkAll", тогда вы могли бы сделать это:

<script type="text/javascript">
$(function() {
  $("input.checkAll").change(function() {
    $(this).closest("tr").next().find(":checkbox").attr("checked", this.checked);
  });
});
</script>

Тогда этот один набор кода работает для всех этих ситуаций на странице (при условии, что разметка / макет совпадают).