Html 无法确定是否检查了单选按钮

我在ui工具包切换器组件中使用单选按钮：

<ul data-uk-switcher="{connect:'#availabilityButtons', animation:'fade'}">
     <button class="uk-button uk-button-primary" type="radio" name="perHourButton" id="perHourButton" value="{{this.spaceId}}" data-uk-tooltip title="Rent hourly">Per Hour</button>
     <button class="uk-button uk-button-primary" type="radio" name="'perDayButton" id="perDayButton" namedata-uk-tooltip title="Rent for full days">Per Day</button>
     <button class="uk-button uk-button-primary" type="radio" data-uk-tooltip id="perMonthButton" title="Rent for full months">Per Month</button>

</ul>

但我继续得到“未检查”。我不知道我做错了什么。

试试这个：

if (document.getElementById('perHourButton').checked == true) {
                console.log("perHour Button is checked!!");
            }
            else{
                console.log("not checked!!");
            }

恐怕“radio”值对于按钮的type属性无效。这可能就是.checked方法不返回true的原因。尝试使用type=“checkbox”输入重新构造html，如下所示：

<ul data-uk-switcher="{connect:'#availabilityButtons', animation:'fade'}">
     <li>
        <input class="uk-button uk-button-primary" type="checkbox" name="perHourButton" id="perHourButton" value="{{this.spaceId}}" data-uk-tooltip title="Rent hourly" value="Per Hour"/>
     </li>
</ul>

---

您有=true，但这会将其设置为true。您的意思是==true？您在OPs设置中尝试过此解决方案吗？它不起作用。

<ul data-uk-switcher="{connect:'#availabilityButtons', animation:'fade'}">
     <li>
        <input class="uk-button uk-button-primary" type="checkbox" name="perHourButton" id="perHourButton" value="{{this.spaceId}}" data-uk-tooltip title="Rent hourly" value="Per Hour"/>
     </li>
</ul>

$('[data-uk-switcher]').on('show.uk.switcher', function(event, area){
if(area == 1){ /* do something if we clicked button with index 1 */ };});