Checkboxy provázané s inputy text s vlastními checkboxy

jandik.n

Ahoj, snažím se vytvořit formulář, který bude mít výsledný vzhled takovýto:

Funguje tak, že checkboxy jsou na řádku provázané, když kliknu na jazyk, ostatní checkboxy na řádku se aktivují, když se klikne na daný checkbox u inputu textu, input se aktivuje atd. V normálním PHP jsem to nakódoval a s nette začínám a hledám elegantní způsob, jak se toho chopit a co nejvíce využít výhod frameworku.

Můžete mě prosím nasměrovat a či poradit, jestli je na tohle nette předpřipraveno, nebo jestli se to musí vykreslovat vše ručně?

Také jestli jde k checkboxu připojit obrázek jako je to u tohoto formuláře, nebo jestli se to musí dělat pomocí helperu/ručně?

Díky moc!

sKopheK

Predpokladam, ze tu aktivaci checkboxu chces bez nejakeho obnoveni stranky, tzn. ze to musis resit JavaScriptem. Jak jsi to udelal pres PHP by me velmi zajimalo :). Obrazek by mel jit pridat jako label toho checkboxu podobnym kodem jako toto:

$label = Html::el()->setHtml('<img src="vlajka.png" alt="vlajka">');
$form->addCheckbox('jazyk_xy', $label);

jandik.n

Jo, jasně, tuto aktivaci jsem řešil JavaScriptem, to jsem neupřesnil, chtěl jsem říct, že jsem nepoužil žádný framework a vše jsem udělal ručně, jak bylo potřeba a asi ne úplně elegantně.

Díky za radu s obrázkem, vyzkouším.

Ještě bych tedy potřeboval poradit s tou provázaností checkboxu/checkboxlistu s textovými inputy na jednom řádku – zda je nějaká elegantní cesta v nette, nebo musím ručně vepisovat ID inputu a k checkboxu přiřazovat onclick s ID daného textového inputu také ručně.

Díky!

sKopheK

Osobně nic neznám (a než něco hledat a pak to zprovozňovat, tak si to napíšu na pár řádek sám), ale pro Nette existuje řešení skoro na všechno, tak třeba na něco narazíš. Nevím přesný markup, který máš u každého řádku, ale podle screenshotu předpokládám, že je to tabulka, takže mě z hlavy napadá přes jQuery:

$('input[type=checkbox].row-activator').click(function() {
	$('input[type=checkbox]:not(.row-activator)', $(this).parents('tr')).click();
});

Stačí dát checkboxu, který má (de)aktivovat ostatní css class row-activator.

jandik.n

sKopheK napsal(a):

Osobně nic neznám (a než něco hledat a pak to zprovozňovat, tak si to napíšu na pár řádek sám), ale pro Nette existuje řešení skoro na všechno, tak třeba na něco narazíš. Nevím přesný markup, který máš u každého řádku, ale podle screenshotu předpokládám, že je to tabulka, takže mě z hlavy napadá přes jQuery:
$('input[type=checkbox].row-activator').click(function() {
	$('input[type=checkbox]:not(.row-activator)', $(this).parents('tr')).click();
});
Stačí dát checkboxu, který má (de)aktivovat ostatní css class row-activator.

Díky moc, vyzkouším!