Jak mogę przejrzeć wszystkie zaznaczone pola wyboru?

Question

Moja witryna zawiera następujące elementy:

<td><input id="inp_0001010030" type="checkbox"></td> 
<td><input id="inp_0001010031" type="checkbox"></td> 
<td><input id="inp_0001010032" type="checkbox"></td> 
<td><input id="inp_0001010033" type="checkbox"></td> 
<td><input id="inp_0001010034" type="checkbox"></td> 

Są one tworzone dynamicznie.

I formularz, który znajduje się na dole strony, poza obszarem z powyższych wierszy:

<form action="??" method="??" > 
    <input value="Action" type="submit"> 
     <select id="SelectedAction" > 
     <option value="1">Delete</option> 
     <option value="2">Move</option> 
     </select> 
</form> 

Po wiersze zostały stworzone muszę mieć kliknięciu zdarzenie przycisk forma pójść patrzeć na siebie zaznacz pole wyboru, a następnie wywołaj funkcję javascript z identyfikatorem i wartości SelectedAnswer dla każdego zaznaczonego pola wyboru.

Pamiętaj, że jeśli istnieje sposób, aby to zrobić bez formularza, to jest jeszcze lepiej. Po prostu nie wiem wystarczająco dużo o jQuery.

Czy to jest coś, co mogę łatwo zrobić z jQuery?

Answer 1

$("input[type=submit]").click(function() { 
    var answer = $("#SelectedAnswer").val(); 
    $("input:checked").each(function() { 
     var id = $(this).attr("id"); 
     alert("Do something for: " + id + ", " + answer); 
    }); 
}); 

Answer 2

Będziesz musiał dodać klasę do swoich pól wyboru. Po tym, użyj .each() metody jQuery jest tak:

HTML

<input type="checkbox" class="list"> 
<input type="checkbox" class="list"> 
<input type="checkbox" class="list"> 
<input type="checkbox" class="list"> 
<input type="checkbox" class="list"> 

jQuery

$(document).ready(function() 
{ 
    $("form input[type='submit']").click(function(e) 
    { 
     e.preventDefault(); 

     // This gets the value of the currently selected option 
     var value = $(this).children(":selected").val(); 

     $(".list").each(function() 
     { 
      if($(this).is(':checked')) 
      { 
       $(this).fadeOut(); 
       // Do stuff with checked box 
      } 
      else 
      { 
       // Checkbox isn't checked 
      } 
     }) 
    }); 
}); 

EDIT

Proszę patrz wyżej (kod ten fiddle). Zaimplementowałem tylko opcję usuwania (niezbyt dobrze), ale użyj zmiennej value, aby sprawdzić, która opcja jest wybrana. Jeśli chcesz, aby tak się stało przed przesłaniem formularza, usuń linię e.preventDefault().

Answer 3

$('input[type=checkbox]:checked').each(function() { 
    // Do something interesting 
}); 

Answer 4

Zdecydowanie.

Pierwszą rzeczą, którą chcesz zrobić, jest powiązanie programu obsługi zdarzeń ze zdarzeniem przesyłania w formularzu przy użyciu procedury obsługi $.submit(). Następny będziesz chciał iteracyjne nad każdym z zaznaczonych elementów wejściowych:

$('form').submit(function() { 
    var action = $('#SelectedAction option:selected', this).val(); 
    $('table input:checkbox:checked').each(function(i){ 
     return doMyCustomFunction(this, action); 
    }); 
} 

Twój funkcji niestandardowej („doMyCustomFunction()” w moim przykładzie) powinien powrócić true lub false w zależności od tego, czy chcesz, aby przesłać formularz lub nie .

drodze praktyczny przykład, może to wyglądać mniej więcej tak:

function doMyCustomFunction(el, formAction) { 
    console.info('The element ID is ' + el.id + ' and the action is ' + formAction); 
    return true; 
}