File tree 2 files changed +40
-0
lines changed
packages/svelte/tests/runtime-legacy/samples/binding-input-group-each-16
2 files changed +40
-0
lines changed Original file line number Diff line number Diff line change
1
+ import { test } from '../../test' ;
2
+
3
+ export default test ( {
4
+ async test ( { assert, target } ) {
5
+ const checkboxes = /** @type {NodeListOf<HTMLInputElement> } */ (
6
+ target . querySelectorAll ( 'input[type="checkbox"]' )
7
+ ) ;
8
+
9
+ assert . isFalse ( checkboxes [ 0 ] . checked ) ;
10
+ assert . isTrue ( checkboxes [ 1 ] . checked ) ;
11
+ assert . isFalse ( checkboxes [ 2 ] . checked ) ;
12
+
13
+ await checkboxes [ 1 ] . click ( ) ;
14
+
15
+ const noChecked = target . querySelector ( '#output' ) ?. innerHTML ;
16
+ assert . equal ( noChecked , '' ) ;
17
+
18
+ await checkboxes [ 1 ] . click ( ) ;
19
+
20
+ const oneChecked = target . querySelector ( '#output' ) ?. innerHTML ;
21
+ assert . equal ( oneChecked , 'Mint choc chip' ) ;
22
+ }
23
+ } ) ;
Original file line number Diff line number Diff line change
1
+ <script lang =" ts" >
2
+ import { writable } from ' svelte/store' ;
3
+ let menu = [' Cookies and cream' , ' Mint choc chip' , ' Raspberry ripple' ];
4
+ let order = writable ({flavours: [' Mint choc chip' ], scoops: 1 });
5
+ </script >
6
+
7
+ <form method =" POST" >
8
+ <input type ="radio" bind:group ={$order .scoops } name ="scoops" value ={1 } /> One scoop
9
+ <input type ="radio" bind:group ={$order .scoops } name ="scoops" value ={2 } /> Two scoops
10
+ <input type ="radio" bind:group ={$order .scoops } name ="scoops" value ={3 } /> Three scoops
11
+
12
+ {#each menu as flavour }
13
+ <input type ="checkbox" bind:group ={$order .flavours } name ="flavours" value ={flavour } /> {flavour }
14
+ {/each }
15
+ </form >
16
+
17
+ <div id ="output" >{$order .flavours .join (' +' )}</div >
You can’t perform that action at this time.
0 commit comments