File tree Expand file tree Collapse file tree 2 files changed +40
-0
lines changed
packages/svelte/tests/runtime-legacy/samples/binding-input-group-each-16 Expand file tree Collapse file tree 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