Checkbox aan checken met button
Dus als ik op button abonnementen klik checkbox abonnementen word aangevinkt.
http://codepen.io/anon/pen/jPxRxZ
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<div id="filter-menu">
<div class="categorie">
<h4>Categorie</h4>
<form>
<div class="checkbox">
<label>
<input type="checkbox" name="categorie" value="abonnementen">
Abonnementen
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="categorie" value="accessoires">
Accessoires
</label>
</div>
</form>
</div>
<div class="merk">
<h4>Merk</h4>
<form>
<div class="checkbox">
<label>
<input type="checkbox" name="merk" value="adobe">
Adobe
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="merk" value="apple">
Apple
</label>
</div>
</form>
</div>
</div>
<div id="gereedschap-lijst">
<div class="gereedschap-spec">
<div class="categorie">
<label>Categorie:</label>
<button type="button">Abonnementen</button>
</div>
<div class="merk">
<label>Merk:</label>
<button type="button">Adobe</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('.gereedschap-spec button').click(function() {
var classname = $('button').parent().attr('class');
var valuname = $('button').val();
$('#filter-menu > div')
.hasClass(classname)
.find(':radio')
.val(valuname)
.prop('checked', 'checked')
.trigger('change');
});
</script>
Heb het ook zo geprobeerd maar dat checked alle checkboxen.
<script>
$('.gereedschap-spec button').click(function() {
var classname = $('button').parent().attr('class');
var valuname = $('button').val();
if ($('#filter-menu > div').hasClass(classname)) {
$('#filter-menu :checkbox')
.val(valuname)
.prop('checked', 'checked')
.trigger('change');
}
});
</script>
<div class="categorie">
<h4>Categorie</h4>
<form>
<div class="checkbox">
<label>
<input type="checkbox" name="categorie" value="abonnementen">
Abonnementen
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="categorie" value="accessoires">
Accessoires
</label>
</div>
</form>
</div>
<div class="merk">
<h4>Merk</h4>
<form>
<div class="checkbox">
<label>
<input type="checkbox" name="merk" value="adobe">
Adobe
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="merk" value="apple">
Apple
</label>
</div>
</form>
</div>
</div>
<div id="gereedschap-lijst">
<div class="gereedschap-spec">
<div class="categorie">
<label>Categorie:</label>
<button type="button">Abonnementen</button>
</div>
<div class="merk">
<label>Merk:</label>
<button type="button">Adobe</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('.gereedschap-spec button').click(function() {
var classname = $('button').parent().attr('class');
var valuname = $('button').val();
$('#filter-menu > div')
.hasClass(classname)
.find(':radio')
.val(valuname)
.prop('checked', 'checked')
.trigger('change');
});
</script>
Heb het ook zo geprobeerd maar dat checked alle checkboxen.
<script>
$('.gereedschap-spec button').click(function() {
var classname = $('button').parent().attr('class');
var valuname = $('button').val();
if ($('#filter-menu > div').hasClass(classname)) {
$('#filter-menu :checkbox')
.val(valuname)
.prop('checked', 'checked')
.trigger('change');
}
});
</script>
- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 13/07/2015 16:13:00 door - Ariën -
Code (php)
1
var classname= $('button').parent().attr('class');
Want als je dan kijkt wat classname is, dan is dat "categorie", terwijl je waarschijnlijk wat anders verwacht.
Daarna maak je een var valuname aan, terwijl dat waarschijnlijk var valuename moet zijn.
Geef je een echo op valuename, dan is die leeg.
Dus .val() geeft niet wat je had gehoopt.
Toevoeging op 12/07/2015 16:53:45:
Gebruik dus .html()
Die geeft wel "Abonnementen".
Daarna ga je zoeken naar een :radio die in een div staat met class="Categorie".
Er is geen element met class="Categorie"?
Dus dat heb ik aangepast.
Uiteindelijk ging je op zoek naar met de value "Abonnementen" naar een name="abonnementen".
Dat is hoofdlettergevoelig.
Dat is opgelost met een .toLowerCase
En uiteindelijk wordt het dit: http://codepen.io/anon/pen/QbrPor
Eddy E op 12/07/2015 16:41:01:
Met een simpele alert, na onderstaande code, had ik je fout al gevonden:
Want als je dan kijkt wat classname is, dan is dat "categorie", terwijl je waarschijnlijk wat anders verwacht.
Daarna maak je een var valuname aan, terwijl dat waarschijnlijk var valuename moet zijn.
Geef je een echo op valuename, dan is die leeg.
Dus .val() geeft niet wat je had gehoopt.
Toevoeging op 12/07/2015 16:53:45:
Gebruik dus .html()
Die geeft wel "Abonnementen".
Daarna ga je zoeken naar een :radio die in een div staat met class="Categorie".
Er is geen element met class="Categorie"?
Dus dat heb ik aangepast.
Uiteindelijk ging je op zoek naar met de value "Abonnementen" naar een name="abonnementen".
Dat is hoofdlettergevoelig.
Dat is opgelost met een .toLowerCase
En uiteindelijk wordt het dit: http://codepen.io/anon/pen/QbrPor
Code (php)
1
var classname= $('button').parent().attr('class');
Want als je dan kijkt wat classname is, dan is dat "categorie", terwijl je waarschijnlijk wat anders verwacht.
Daarna maak je een var valuname aan, terwijl dat waarschijnlijk var valuename moet zijn.
Geef je een echo op valuename, dan is die leeg.
Dus .val() geeft niet wat je had gehoopt.
Toevoeging op 12/07/2015 16:53:45:
Gebruik dus .html()
Die geeft wel "Abonnementen".
Daarna ga je zoeken naar een :radio die in een div staat met class="Categorie".
Er is geen element met class="Categorie"?
Dus dat heb ik aangepast.
Uiteindelijk ging je op zoek naar met de value "Abonnementen" naar een name="abonnementen".
Dat is hoofdlettergevoelig.
Dat is opgelost met een .toLowerCase
En uiteindelijk wordt het dit: http://codepen.io/anon/pen/QbrPor
Bedankt voor je hulp.
Ik heb het nog wat verder aangepast en heb nu dit en dit werkt.
http://codepen.io/anon/pen/GJdLBN
Want dat is niet zo moeilijk: http://codepen.io/anon/pen/JdZjyp
Gewoon HTML.
CSS is puur voor de opmaak.
Gewijzigd op 13/07/2015 09:41:11 door Eddy E
Eddy E op 13/07/2015 09:34:57:
En wat is het nu er nu van? Grote knop ipv klein vinkje aanklikken?
Dit word voor een pagina met producten en heb een filter manier zo gemaakt ik laad alle producen en met jquery filter ik wat ik wil zien op de pagina. Dus ik kan in een menu kiezen de categorieën en voor merken en in een zoek veld kan ik daar nog verder in filteren. Er komen niet extreem veel producten dus alles laden in 1 keer is geen probleem. Had eerst een pagina waar dan een link bij product stond naar de categorie en merk waar ik op kon klikken en dan een andere pagina opende met de gefilterde producten maar alle in 1 pagina is voor mij handiger.
De button inplaats van link is voor bootstrap op iOS anders geeft het vaak problemen.
Hoop dat ik daarmee je vraag hebt beantwoord.
Gewoon via de URL na de # de gekozen categorieën geven. Dan kan je er ook direct naar linken.
En laat jQuery maak uitvissen wat er na de # staat en aan de hand daarvan tonen.
Voordeel: je kan gewone links gebruiken.
voordeel: je kan direct naar de goede categorie(en) linken
Voordeel: je code blijft simple/eenvoudig
Nadeel: je hebt een hoop werk voor niets gedaan ;)