Javascript 选中/取消选中放大器上未正确更新的无线电输入字段

我已经开发了一个放大器的网站，我有三个单选按钮

全部展示

只显示最喜欢的

清除所有

当我点击“全部清除”按钮时，它会显示一个灯箱。在那个灯箱上我有两个按钮

嗯

取消

当用户单击灯箱中的“取消”时，将选中“显示所有无线电输入”。我用amp状态变量更改实现了它。这是我第一次单击“取消”时，在“显示所有收音机输入”中正确选中了该按钮，但之后，如果我再次单击“清除收音机输入”，然后再次单击“取消”按钮，则不会再次选中“显示所有收音机输入”

在这里，我在codepen中添加了一个示例代码

示例代码链接：

宠儿
body{-webkit动画：-amp start 8s steps（1，end）0s1 normal tweet；-moz动画：-amp start 8s steps（1，end）0s1 normal tweet；-ms动画：-amp start 8s steps（1，end）0s1 normal tweet}@-webkit关键帧-amp start{从{可见性：隐藏}到{可见性：可见}}@-moz关键帧-amp start{from{可见性：隐藏}
安培灯箱{
背景：rgba（0,0,0,75）；
}
amp lightbox.对齐资源中心{
身高：100%；
}
.fav灯箱{
背景：#fff；
宽度：70%；
位置：相对位置；
最高：45%；
左：0；
右：0；
保证金：0自动；
填充：15px；
边界半径：10px；
垫底：35px；
}
.fav灯箱h4{
颜色：#000；
保证金：0；
字号：600；
边缘底部：10px；
}
.fav流行歌曲标题{
溢出：自动；
}
.灯箱btn grup{
浮动：对；
}
.lightbox btn grup输入[type=“submit”]，.cancel btn{
背景：无；
边界：无；
颜色：#3A98FF；
字体大小：16px；
}
.灯箱btn grup.favOkBtn{
字号：700；
}
.取消btn{
文字装饰：无；
}
{
“chkRadio”：“展示所有人”
}
全部展示
仅显示收藏夹
是否确实要清除整个列表？
清除所有

---

有什么建议吗？

嗯，我终于从amp团队找到了这个问题的解决方案。我发布了这个答案，这样如果有人面临同样的问题，他们就可以轻松解决

<div class="favorite-content-filter">
    <label>
        <input name="filter" value="show_all" type="radio" role="button" tabindex="0"
            on="change:AMP.setState({partnerLogo:{chkRadio : 'show_all'}})" checked
            [checked]="partnerLogo.chkRadio == 'show_all' ? checked : '' ">
            show all
    </label>
    <label>
        <input name="filter" value="show_favorite" type="radio" role="button" tabindex="0"
            on="change:AMP.setState({partnerLogo:{chkRadio : 'show_all'}})"
            [checked]="partnerLogo.chkRadio == 'show_fav' ? checked : '' ">
            show only favorites
    </label>
    <label>
        <amp-lightbox id="favorite-lightbox" layout="nodisplay">
            <div class="fav-lightbox" role="button" tabindex="0">
                <div class="fav-pop-title">
                    <h4>Are you sure you want to clear entire list?</h4>
                </div>
                <div class="lightbox-btn-grup">
                    <input type="submit" value="Cancel" role="button" tabindex="0"
                        on="tap:favorite-lightbox.close ,AMP.setState({partnerLogo:{chkRadio : 'show_all'}})"/>
                    <input type="submit" value="OK" role="button" tabindex="0" class="favOkBtn"
                        on="tap:favorite-lightbox.close">
                </div>
            </div>
        </amp-lightbox>
        <input 
            name="filter" type="radio" role="button" 
            tabindex="0" on="change:favorite-lightbox, AMP.setState({partnerLogo:{chkRadio : ''}})" 
            [checked]="partnerLogo.chkRadio != show_all ? checked : '' "> Clear All
    </label> 
</div>

全部展示
仅显示收藏夹
是否确实要清除整个列表？
清除所有

我只需要在lightbox打开时将partnerLogo.chkRadio设置为其他值。否则，状态将与所选收音机不同步

<div class="favorite-content-filter">
    <label>
        <input name="filter" value="show_all" type="radio" role="button" tabindex="0"
            on="change:AMP.setState({partnerLogo:{chkRadio : 'show_all'}})" checked
            [checked]="partnerLogo.chkRadio == 'show_all' ? checked : '' ">
            show all
    </label>
    <label>
        <input name="filter" value="show_favorite" type="radio" role="button" tabindex="0"
            on="change:AMP.setState({partnerLogo:{chkRadio : 'show_all'}})"
            [checked]="partnerLogo.chkRadio == 'show_fav' ? checked : '' ">
            show only favorites
    </label>
    <label>
        <amp-lightbox id="favorite-lightbox" layout="nodisplay">
            <div class="fav-lightbox" role="button" tabindex="0">
                <div class="fav-pop-title">
                    <h4>Are you sure you want to clear entire list?</h4>
                </div>
                <div class="lightbox-btn-grup">
                    <input type="submit" value="Cancel" role="button" tabindex="0"
                        on="tap:favorite-lightbox.close ,AMP.setState({partnerLogo:{chkRadio : 'show_all'}})"/>
                    <input type="submit" value="OK" role="button" tabindex="0" class="favOkBtn"
                        on="tap:favorite-lightbox.close">
                </div>
            </div>
        </amp-lightbox>
        <input 
            name="filter" type="radio" role="button" 
            tabindex="0" on="change:favorite-lightbox, AMP.setState({partnerLogo:{chkRadio : ''}})" 
            [checked]="partnerLogo.chkRadio != show_all ? checked : '' "> Clear All
    </label> 
</div>