当单选按钮从选中状态变为未选中状态时，如何执行某些操作？

我想在Javascript中创建一个函数，当有人点击/关闭它时，它改变了单选按钮上的属性（这是为了能够检测到单选按钮被选中）。这里是一个jsFiddle解释我想要做的更多一点。 jsFiddle中的代码唯一的问题在于它在jQuery中，我不了解足够的jQuery将它转换回其纯Javascript对应。 Here是我尝试将jQuery转换为Javascript。我完全可以复制代码并使用它，但之后我不会学习任何东西。当单选按钮从选中状态变为未选中状态时，如何执行某些操作？

我一直试图找出最后4个小时的时间，真的很感激任何帮助。

谢谢，亚历克斯

InitRadio('name'); 
 

 
function InitRadio(name) { 
 
    val = 0; 
 
    $.each($(':radio[name="' + name + '"]'), function() { 
 
    $(this).val(val++); 
 
    $(this).attr('chk', '0'); 
 
    $(this).on("click", function(event) { 
 
     SetRadioButtonChkProperty($(this).val(), name); 
 
     document.getElementById('1').innerText = document.getElementById('input1').getAttribute('chk'); 
 
     document.getElementById('2').innerText = document.getElementById('input2').getAttribute('chk'); 
 
     document.getElementById('3').innerText = document.getElementById('input3').getAttribute('chk'); 
 
    }); 
 
    }); 
 
    document.getElementById('1').innerText = document.getElementById('input1').getAttribute('chk'); 
 
    document.getElementById('2').innerText = document.getElementById('input2').getAttribute('chk'); 
 
    document.getElementById('3').innerText = document.getElementById('input3').getAttribute('chk'); 
 
} 
 

 
function SetRadioButtonChkProperty(val, name) { 
 
    $.each($(':radio[name="' + name + '"]'), function() { 
 
    if ($(this).val() != val) 
 
     $(this).attr('chk', '0'); 
 
    else { 
 
     if ($(this).attr('chk') == '0') 
 
     $(this).attr('chk', '1'); 
 
    } 
 
    }); 
 
}

p { 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<input type='radio' class='radio-button' name='name' id="input1"> 
 
<p id="1"></p> 
 
<input type='radio' class='radio-button' name='name' id="input2"> 
 
<p id="2"></p> 
 
<input type='radio' class='radio-button' name='name' id="input3"> 
 
<p id="3"></p>

来源

2016-11-22 Alex Lowe

我的理解是，你可以通过jQuery的转换为JavaScript是部分地和你有困难由于对jQuery缺乏了解而导致的转换。

下面是my conversion，注释掉了jQuery代码行，后面跟着他们最直接的Javascript代码。请记住，根据你如何使用它们，一些jQuery函数有不同的转换（尽管你的代码没有这个问题）。此外，由于转换和由于自己的代码问题，此代码可能会受益于大量清理。我已经避免进行任何清理工作，以利于展示jQuery/Javascript等效性。

InitRadio('name'); 
 

 
function InitRadio(name) { 
 
    val = 0; 
 
    //$.each($(':radio[name="' + name + '"]'), function() { 
 
    var radioButtons = [].slice.call(document.querySelectorAll('input[type="radio"][name="'+name+'"]')); 
 
    radioButtons.forEach(function(element,index){ 
 
    //$(this).val(val++); 
 
    element.value = val++; 
 
    //$(this).attr('chk', '0'); 
 
    element.setAttribute('chk','0'); 
 
    //$(this).on("click", function(event) { 
 
    element.addEventListener('click',function(event){ 
 
     //SetRadioButtonChkProperty($(this).val(), name); 
 
     SetRadioButtonChkProperty(element.value, name); 
 
     document.getElementById('1').innerText = document.getElementById('input1').getAttribute('chk'); 
 
     document.getElementById('2').innerText = document.getElementById('input2').getAttribute('chk'); 
 
     document.getElementById('3').innerText = document.getElementById('input3').getAttribute('chk'); 
 
    }); 
 
    }); 
 
    document.getElementById('1').innerText = document.getElementById('input1').getAttribute('chk'); 
 
    document.getElementById('2').innerText = document.getElementById('input2').getAttribute('chk'); 
 
    document.getElementById('3').innerText = document.getElementById('input3').getAttribute('chk'); 
 
} 
 

 
function SetRadioButtonChkProperty(val, name) { 
 
    //$.each($(':radio[name="' + name + '"]'), function() { 
 
    var radioButtons = [].slice.call(document.querySelectorAll('input[type="radio"][name="'+name+'"]')); 
 
    radioButtons.forEach(function(element,index){ 
 
    //if ($(this).val() != val) 
 
    if (element.value != val) 
 
     //$(this).attr('chk', '0'); 
 
     element.setAttribute('chk','0'); 
 
    else { 
 
     //if ($(this).attr('chk') == '0') 
 
     if (element.getAttribute('chk') == '0') 
 
     //$(this).attr('chk', '1'); 
 
     element.setAttribute('chk','1'); 
 
    } 
 
    }); 
 
}

p { 
 
    display: inline; 
 
}

<input type='radio' class='radio-button' name='name' id="input1"> 
 
<p id="1"></p> 
 
<input type='radio' class='radio-button' name='name' id="input2"> 
 
<p id="2"></p> 
 
<input type='radio' class='radio-button' name='name' id="input3"> 
 
<p id="3"></p>

来源

2016-11-23 00:45:36 Ouroborus

非常感谢转换，它开始变得更有意义。 –

如果你只是想知道的单选按钮是否被选中，就没有必要设置一个自定义属性。只要看看它的checked属性。

来源

2016-11-22 22:56:36 ray

对不起，我的措辞。我试图说只是改变一个元素不一定天气它被检查或不。 –

我不清楚你在问什么。你能澄清你想要做什么吗？ – ray

我非常想做的事情就是问题中的jQuery代码，但我只是想用纯Javascript来做。 –

也许这就是你想要的。
你可以尝试一下在this Fiddle

HTML：

<div class="RadioList"> 
    <input type="radio" class="radioBtn" value="r1" name="radio"> R1 
    <input type="radio" class="radioBtn" value="r2" name="radio"> R2 
    <input type="radio" class="radioBtn" value="r3" name="radio"> R3 
    <input type="radio" class="radioBtn" value="r4" name="radio"> R4 
</div> 
<div class="statusRadio"> 
    <p>Checked Radio value: <b id="statusChecked">none</b></p> 
</div>

的jQuery：

$(document).ready(function() { 
    $(document).on('click', '.radioBtn', function() { 
    var valRadio = this.value; 
    $('#statusChecked').html(valRadio); 
    }); 
});

来源

2016-11-23 00:20:46 AchmaDesigner

当单选按钮从选中状态变为未选中状态时，如何执行某些操作？

回答

相关问题