Question

我正在尝试在Javascript中创建一个函数来更改单选按钮上的属性（这样我可以检测到哪个单选按钮被选中）当有人点击/关闭它时。这是一个jsFiddle解释了我想要做的更多。 jsFiddle中代码的唯一问题是它在jQuery中，我不了解足够的jQuery将其转换回纯Javascript对应物。 Here是我尝试将jQuery转换为Javascript的尝试。我完全可以复制代码并使用它但是我不会学习任何东西。

我一直试图在过去4小时内弄清楚这一点，并且非常感谢任何帮助。

谢谢，亚历

＆＃13;

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');
    }
  });
}

＆＃13;

p {
  display: inline;
}

＆＃13;

<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>

＆＃13;

Answer 1

也许这就是你想要的。
您可以在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);
  });
});

Answer 2

我的理解是，您部分通过将jQuery转换为javascript而且由于对jQuery缺乏了解而导致转换失败。

下面是my conversion，其中jQuery行被注释掉，然后是最直接的Javascript等价物。请记住，根据您使用它们的方式，某些jQuery函数会有不同的转换（尽管您的代码都没有此问题）。此外，由于转换和您自己的代码问题，此代码可以从大量清理中受益。我已经避免进行任何清理，而是支持演示jQuery / Javascript等效。

＆＃13;

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');
    }
  });
}

＆＃13;

p {
  display: inline;
}

＆＃13;

<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>

＆＃13;

Answer 3

如果您只想知道单选按钮是否已选中，则无需设置自定义属性。只需查看其checked属性。

单选按钮从选中复选到未选中时如何执行操作？

3 个答案: