• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Js praca z checkboxami

0 głosów
172 wizyt
pytanie zadane 16 października 2019 w JavaScript przez michal_php Stary wyjadacz (13,570 p.)

Cześć.

Mam problem ze skryptem js , który chcę aby pobierał wartość value tylko z zaznaczonych checkboxów. W dodatku jest też tak ,że każdy user posiada inna liczbę checkboxów w zależności od ustawień.I teraz moje pytanie jak można się jakość dobrać do tylko zaznaczonych checkboxów wiedząc ,że jeden user ma ich 2 a drugi 4? Napisałem coś takiego :

function test() {
    for (let i=0; i<3; i++){
        if(document.querySelectorAll('input[type="checkbox"]')[i].checked){}
        console.log(document.querySelectorAll('input[type="checkbox"]')[i].value);
    }
}

Bo kiedy mam zaznaczony checkbox nr1 a mam ich 4 to pobiera zawsze wartość tylko z jednego nie zależnie czy jest zaznaczony nr2 nr3 zawsze pokaże mi nr1. Chyba ,że go nie zaznaczę to nic nie będzie mimo zaznaczenie nr3.

coś mniej więcej takiego : https://codepen.io/mich_php/pen/jgxEMM?editors=1010

Początkowo myślałem też aby podejść tak jak się wysyła w formularzu do back-endu checkboxy:

console.log(document.querySelectorAll('input[name="ajax_form[departments][]"]').value);

ale wywala mi błędy z góry dziękuje za jakąś wskazówkę 

2 odpowiedzi

+1 głos
odpowiedź 16 października 2019 przez obl Maniak (51,120 p.)
<input type="button" onClick="test()"/>

i

function test() {
  console.log(document.querySelectorAll('input[type="checkbox"]'))
  let checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach((checkbox) => {
    console.log(checkbox)
  });

}

i w konsoli mam:

NodeList(3) [ input#ajax_form_departments_0, input#ajax_form_departments_0, input#ajax_form_departments_0
 ]

<input id="ajax_form_departments_0" type="checkbox" name="ajax_form[departments][]" value="1" checked="checked">

<input id="ajax_form_departments_0" type="checkbox" name="ajax_form[departments][]" value="2" checked="checked">

<input id="ajax_form_departments_0" type="checkbox" name="ajax_form[departments][]" value="3" checked="checked">

 

komentarz 16 października 2019 przez michal_php Stary wyjadacz (13,570 p.)

A mam takie pytanie jak można zrobić tablice i ja można przekazać chodzi mi o coś takiego :

 var login = $('#ajax_form_user_username').val();
    var email = $('#ajax_form_user_email').val();
    var name = $('#ajax_form_user_firstName').val();

let checkboxes = document.querySelectorAll('input[type="checkbox"]');
    checkboxes.forEach((checkbox) => {
        if(checkbox.checked){
            var checkboxCompany = checkbox.value; // jak to przekazać 
        }
    });

 data = {
        "ajax_form_user[departments][]":checkboxCompany, // tutaj przekazać
        "ajax_form_user[username]":login,
        "ajax_form_user[email]":email,
        "ajax_form_user[firstName]":name,
    };
  $.post({
        url: url',
        data:data,
        success: function(data)
        {
            alert('zapisano');
        }
    });

tak aby tablica wyglądała :

  data = {
        "ajax_form_user[departments][]": i tu aby były te wszystkie wartości pobrane z checkoxa
    };

 

+1 głos
odpowiedź 16 października 2019 przez Bartłomiej Bolesta Obywatel (1,610 p.)
edycja 16 października 2019 przez Bartłomiej Bolesta

Nie wiem czy checkboxy tworzysz też w js czy php, ale załóżmy dla przykładu php, najwyżej sobie zrobisz odpowiednio w js. Dodatkowo polecam dołożyć labela, żeby user nie musiał klikać konkretnie w ten checkbox.
A więc ustawiasz w pętli ile tych checkboxów ma być dla danego usera, nadając value odpowiadającego iteracji:
 

<label class="labelcheckBox">
    <input type="checkbox" name="YourCheckbox" value="'.$i.'" class="checkBoxBtn">// jakiś kod
</label>


Potem w js

var userSelection = document.getElementsByClassName('labelcheckBox');
var checkBoxSelected = document.getElementsByClassName('checkBoxBtn');

for(var i = 0; i < userSelection.length; i++) {
(function(index) {			
	userSelection[index].addEventListener("click", function() {
		var checkSelection = [];

		for(var j = 0; j < userSelection.length; j++) {	
			checkSelection[j] = checkBoxSelected[j].checked;
			if(checkSelection[j] == true){				
				//jakiś kod
			}
		}
//jakiś dalszy kod
	})
})(i);
}

Edit.
 

Jak pisałem to dołożyłeś drugi post, więc to out:
 

<input type="button" onClick="test()"/>

Działasz w JS za pomocą eventlistenera. Jeśli nie umiesz to zapoznaj się z tym, bo jest o wiele praktyczniejsze no i w sumie tak jak powyżej nie jest już poprawnie.
Do tego zamknąć kod js w:

document.addEventListener("DOMContentLoaded", function() {

});

Aby odpalał się po załadowaniu struktury dokumentu.

komentarz 16 października 2019 przez michal_php Stary wyjadacz (13,570 p.)
Rozumiem ,że twoja metoda opiera się na pobieraniu tylko po classie z wartość checkboxa ?Mam też pytanie o co chodzi z tym index ?
komentarz 16 października 2019 przez Bartłomiej Bolesta Obywatel (1,610 p.)

Jakbyś chciał, mógłbyś przerobić do selectora, ale wg. mnie tak jest wygodniej, a i jeśli pojawią się inne checkboxy to nie będzie kolidować, ale możesz zrobić tak jak miałeś:

var userSelection = document.querySelectorAll('input[type="checkbox"]');

I nie będzie większej różnicy.

Po indexie odwołuje się do tego checkboxa, który został zaznaczony. Można też zrobić tak:

for(let i = 0; i < userSelection.length; i++) {
  userSelection[i].addEventListener("click", function() {
    console.log("Clicked index: " + i); // będzie to samo co w powyższym by było: console.log("Clicked index: " + index);
  })
}

Pierwsza metoda obsłuży starsze przeglądarki.

 

komentarz 16 października 2019 przez ScriptyChris Mędrzec (168,460 p.)

Mam też pytanie o co chodzi z tym index ?

Poczytaj o IIFE i zapoznaj się z Event Loop.

komentarz 16 października 2019 przez michal_php Stary wyjadacz (13,570 p.)

A mam takie pytanie bo jak to teraz mogę ubrać w tablice i gdzieś przekazać ? Chodzi mi o coś takiego :

    var login = $('#ajax_form_user_username').val();
    var email = $('#ajax_form_user_email').val();

    let checkboxes = document.querySelectorAll('input[type="checkbox"]');
    checkboxes.forEach((checkbox) => {
        if(checkbox.checked){
            var checkboxCompany = checkbox.value; // jak ją tą wartość
// pobrać 
// jak całość umieszcze tutaj to wysyła mi się dwa razy oczywiście z //dwoma innymi value z checboxa.
        }
    });
    data = {
        "ajax_form_user[departments][]":checkboxCompany, // i tutaj ją przekazać 
        "ajax_form_user[username]":login,
        "ajax_form_user[email]":email,
    };
    $.post({
        url: '/pl/owner/ajax/'+UserId+'/edit',
        data:data,
        success: function(data)
        {
            alert('zapisano');
        }
    });
    console.log(data);

 

komentarz 16 października 2019 przez ScriptyChris Mędrzec (168,460 p.)

Czy dobrze rozumiem pytanie, że chcesz wartości ze wszystkich checkbox'ów ze zmiennej checkboxes umieścić w zmiennej checkboxCompany? Możesz zrobić to np. korzystając z Array.prototype.reduce:

var checkboxCompany = [...checkboxes].reduce((accumulator, checkbox) => {
        if(checkbox.checked){
            accumulator.push(checkbox.value);
        }

        return accumulator;
}, []);

 

komentarz 16 października 2019 przez michal_php Stary wyjadacz (13,570 p.)

Nie do końca rozumiem jak ma to działać ?

https://codepen.io/mich_php/pen/jgxEMM?editors=1011

Ale chodzi mi w sensie ,że jak np: zaznaczysz dwa checkboxy nr1 nr2 i każdy ma tam jakąś swoją wartość value.I W sensie aby 

  data = {
        "ajax_form_user[departments][]":checkboxCompany
    };

ajax_form_user[departments][] : zawierała wszystkie te wartości z checkboxa jeden po drugim. 

komentarz 16 października 2019 przez ScriptyChris Mędrzec (168,460 p.)

https://codepen.io/ChrissP92/pen/zYYBJee?editors=1011

Zmienna checkboxCompany zawiera wartości checkbox'ów oddzielone spacją jako string.

komentarz 16 października 2019 przez michal_php Stary wyjadacz (13,570 p.)

Dziękuje za pomoc.

Mam tylko pytanie bo nie rozumiem tego fragmentu kodu:

const checkboxCompany = [...checkboxes].reduce((accumulator, checkbox)

 

komentarz 16 października 2019 przez ScriptyChris Mędrzec (168,460 p.)

Dokumentację metody reduce podlinkowałem w komentarzu wyżej. W tym przypadku zmienna checkboxes zawierająca NodeListę (zwrotka z document.querySelectorAll) jest przerzucana na tablicę za pomocą operatora spread. Dzięki temu mamy dostęp do metod z Array.prototype. Operator spread można zastąpić np. Array.from lub Array.prototype.slice.

Oczywiście można obyć się bez przerzucania pseudo-tablicy na tablicę i korzystania z metod tablicowych i użyć zwykłej pętli for.

Podobne pytania

0 głosów
0 odpowiedzi 86 wizyt
pytanie zadane 29 października 2018 w Android, Swift, Symbian przez Micheall Początkujący (420 p.)
0 głosów
1 odpowiedź 104 wizyt
pytanie zadane 24 maja 2018 w Systemy operacyjne, programy przez SzymonSmith Użytkownik (870 p.)
0 głosów
1 odpowiedź 135 wizyt
pytanie zadane 8 sierpnia 2015 w PHP przez niezalogowany

85,805 zapytań

134,588 odpowiedzi

298,787 komentarzy

56,698 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 494p. - rucin93
  2. 463p. - nidomika
  3. 431p. - CC PL
  4. 385p. - Whistleroosh
  5. 379p. - ScriptyChris
  6. 372p. - adrian17
  7. 340p. - TheLukaszNs
  8. 339p. - WhiskeyTaster
  9. 321p. - Argeento
  10. 318p. - Dagohar
  11. 287p. - Anonim 1794483
  12. 281p. - Klaudia
  13. 278p. - B4mbus
  14. 269p. - b0mbix
  15. 246p. - tokox
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...