キーボードのEnterまたはSpacebarを押すとチェックボックスをオンまたはオフにするには？

Question

私は実際にはCSSの背景画像ですラジオボタンのように見えるチェックボックスがあります。この要素のために、ユーザがスペースバーを使用してチェックしたり、キーボードのキーを入力したりすることができます。私はここれるonkeypress関数に

を入れてみましたspan要素内

は私のコードです：

<span class=" " role="checkbox" tabindex="0" onKeypress="myFunction(event)" 

    function myFucntion(event) { 

     var node = event.currentTarget 


     var state = node.getAttribute('aria-checked').toLowerCase() 

     if (event.type === 'click' || 
      (event.type === 'keydown' && event.keyCode === 32) 
     ) { 
       if (state === 'true') { 
       node.setAttribute('aria-checked', 'false') 

       } 
       else { 
       node.setAttribute('aria-checked', 'true') 

       } 

     event.preventDefault() 
     event.stopPropagation() 
     } 

    } 

私がこのロジックを試してみました：あなたはこのカスタムを試すことができますhttps://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/checkbox/checkbox-1.html

My question is 1) how do i change the image when the user checks/unchecks it 
        2) how to handle the spacebar/enter keycodes 
        3) how to store image inside a javascript variable 
    Apologies for not being able to put the proper code,this is just partial one,but any kind of help would be highly appreciated. 

Answer 1

チェックボックスはスペースバーでは動作しますが、エンターキーでは動作しません。 https://codepen.io/CreativeJuiz/pen/BiHzp

<form action="#"> 
    <p> 
    <input type="checkbox" id="test1" /> 
    <label for="test1">Red</label> 
    </p> 
    <p> 
</form>