Как получить идентификатор или ссылку в строке списка, которую я нажимаю на флажок?

Question

У меня есть элемент управления ListView ASP.NET 2.0 (aka: parent) и настроен внутри этого ListView. У меня есть другой ListView (aka: child). Для каждой строки у родителя есть потенциально дочерний элемент управления ListView, который может содержать 1-3 строки. Каждая строка имеет два флажка (флажок select и флажок deny).

Мне нужно обработать эти флажки в JavaScript, чтобы, если один из них выбран в любой из строк, все остальные флажки выбора не отмечены, а флажок deny для этой строки не установлен. Строки, которые НЕ были выбраны, могут иметь флажки deny checkbox.

Каков наилучший подход к этому?

Answer 1

Я сделал все возможное, чтобы понять, как разметка будет из вашего описания, но в основном я построил несколько div, содержащих набор входов checkbox (игнорируйте плохую разметку).

<div> 
    <form> 
     <label>Yes</label> 
     <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off"> 
     <label>No</label> 
     <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off"> 
     <label>Maybe</label> 
     <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off"> 
    </form> 
</div> 
<div> 
    <form> 
     <label>Yes</label> 
     <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off"> 
     <label>No</label> 
     <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off"> 
     <label>Maybe</label> 
     <input type="checkbox" value="1" name="alerts[rateAlert]" class="alert_check_box auto_check_box" tabindex="1000" autocomplete="off"> 
    </form> 
</div> 

Отсюда я начал с помощью JQuery (очень простой в использовании, но до вас, чтобы выяснить, как настроить).

$('input').change(function(){ 
    if($(this).attr('checked')) { 
     $(this).parent().find('input').attr('checked', false); 
     $(this).attr('checked', true); 
    } 
}); 

Этот сценарий прослушивает событие изменения на все флажки, а затем выполняет проверку на основе родительского он содержится. Если этот флажок установлен, снимите флажок все остальные флажки, содержащиеся внутри этого родителя.

Вы можете сделать это более конкретным в своей инструкции if или создать инструкцию else if для других конкретных случаев использования.

if(check-box is checked and doesnt have class name ABC) { 
    //do normal stuff above 
} else if(specific check-box with class name of ABC is checked) { 
    //do something else 
} 

Answer 2

Я думаю Вы можете использовать MutuallyExclusiveCheckboxExtender от AjaxControlToolkit делать то, что вы хотите. Ниже приведена краткая информация о том, что вы описали:

<asp:ListView ID="parentListView" runat="server" ItemPlaceholderID="PlaceHolder1"> 
    <LayoutTemplate> 
     <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder> 
    </LayoutTemplate> 
    <ItemTemplate> 
     <asp:Label ID="lblFieldSet" runat="server" Text='<%# Eval("SetName") %>' /> 
     <br /> 
     <asp:ListView ID="childListView" runat="server" DataSource='<%# Eval("Items") %>' 
      ItemPlaceholderID="PlaceHolder2"> 
      <LayoutTemplate> 
       <asp:PlaceHolder ID="PlaceHolder2" runat="server"></asp:PlaceHolder> 
      </LayoutTemplate> 
      <ItemTemplate> 
       <div> 
        <asp:Label ID="lblItemName" runat="server" Text='<%# Eval("ItemName") %>' /> 
        <br /> 
        <asp:CheckBox ID="cbSelect" runat="server" Text="Select" /> 
        <asp:CheckBox ID="cbDeny" runat="server" Text="Deny" /> 
        <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="exclusiveCheckboxExtender" runat="server" 
         TargetControlID="cbSelect" Key="Select" /> 
       </div> 
      </ItemTemplate> 
     </asp:ListView> 
    </ItemTemplate> 
</asp:ListView> 

Обратите внимание на использование удлинителя. Это позволит эффективно только один флажок «Выбрать» в любой момент и время. Я не думаю, что это именно то, что вы хотите, но вы должны быть в состоянии адаптировать его в соответствии с вашими потребностями.