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

Js praca z checkboxami

VPS Starter Arubacloud
0 głosów
454 wizyt
pytanie zadane 16 października 2019 w JavaScript przez michal_php Stary wyjadacz (13,700 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,280 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,700 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,630 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,700 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,630 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 (190,190 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,700 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 (190,190 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,700 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 (190,190 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,700 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 (190,190 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 113 wizyt
pytanie zadane 29 października 2018 w Android, Swift, Symbian przez Micheall Początkujący (420 p.)
0 głosów
1 odpowiedź 606 wizyt
pytanie zadane 24 maja 2018 w Systemy operacyjne, programy przez SzymonSmith Użytkownik (870 p.)
0 głosów
1 odpowiedź 210 wizyt
pytanie zadane 8 sierpnia 2015 w PHP przez niezalogowany

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...