Question

我有两个带有一个输入文本的单选按钮，当我插入大于12的值时，它将自动检查RadioBtn2，否则将检查RadioBtn1

它可以正常工作，但是当我返回文本框并再次更改值时，直到刷新页面后它才起作用

$(function() {
  $('#field222').change(function() {
    var text_value = $("#field222").val();
    if (text_value >= '12') {
      $('input:radio[id="RadioBtn2"]').attr('checked', 'checked');
    } else {
      $('input:radio[id="RadioBtn1"]').attr('checked', 'checked');
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option1' >Secend

Answer 1

那是因为if statemenet中的条件不正确。您需要先将值解析为整数，然后再进行大于校验。

您还需要将change事件更改为keyup并将属性设置为true：

var text_value = parseInt($("#field222").val());
if (text_value >= 12) {
  $('input:radio[id="RadioBtn1"]').prop("checked", true);
} else {
  $('input:radio[id="RadioBtn2"]').prop("checked", true);
}

$(function() {
  $('#field222').keyup(function() {
    var text_value = parseInt($("#field222").val());
     debugger;
     if (text_value >= 12) {
       $('input:radio[id="RadioBtn1"]').prop("checked", true);
     } else {
       $('input:radio[id="RadioBtn2"]').prop("checked", true);
     }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option1' checked>Secend

Answer 2

尝试使用具有按键功能的代码和用于单选按钮检查的道具。

$(function() {
  $('#field222').keyup(function() {
    var text_value = parseInt($("#field222").val());

    if (text_value >=12) {

      $('input:radio[id="RadioBtn1"]').prop("checked", true);
    } else {
      $('input:radio[id="RadioBtn2"]').prop("checked", true);
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='integer' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option1' checked>Secend
 Run code

Answer 3

解析值以及条件是否如此

对于等于或大于（> =）1.6的jQuery版本，请使用：

var text_value = parseInt($("#field222").val());
if (text_value >= 12) {
  $('#RadioBtn1').prop("checked", true);
} else {
  $('#RadioBtn2').prop("checked", true);
}

Answer 4

当我返回文本框并再次更改该值时，它不起作用

这是因为您应该使用.attr时使用.prop。本质上，总是设置第二个收音机的.attr，并且由于您只能选中一个收音机，因此浏览器将第二个收音机选中。

如果您使用.prop 或（如果您使用.removeAttr，然后再进行设置，则效果很好）。

$(function() {
  $('#field222').change(function() {
    var text_value = $("#field222").val();
    if (text_value >= '12') {    
      $('input:radio[id="RadioBtn2"]').prop('checked', 'checked');
    } else {
      $('input:radio[id="RadioBtn1"]').prop('checked', 'checked');
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option2' >Secend

$(function() {
  $('#field222').change(function() {
    var text_value = $("#field222").val();
    $('input:radio').removeAttr("checked");
    if (text_value >= '12') {    
      $('input:radio[id="RadioBtn2"]').attr('checked', 'checked');
    } else {
      $('input:radio[id="RadioBtn1"]').attr('checked', 'checked');
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option2' >Secend

如果您想以数字方式检查它，则还需要将该值解析为一个int，但它可以按原样使用字符串（使用“ 0”和“ 12”显示它可以工作）。

Answer 5

$(function() {
  $('#field222').keyup(function() {
    var text_value = $("#field222").val();
    if (text_value >= 12) {
      $('#RadioBtn2').prop('checked', true);
    } else {
      $('#RadioBtn1').prop('checked', true); 
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option1' >Secend

Answer 6

我在上面的示例中看到了一个问题，您正在使用整数值并尝试与字符串进行比较。

代替

 if (text_value >= '12') {    
  $('input:radio[id="RadioBtn2"]').attr('checked', 'checked');
} else {
  $('input:radio[id="RadioBtn1"]').attr('checked', 'checked');
}

使用

if (text_value >= 12) {
$("input[id='RadioBtn1']").prop("checked", true);

} else {
$("input[id='RadioBtn2']").prop("checked", true);

[请参见工作示例]（https://jsfiddle.net/HuZcM/1137/ ）

使用JQuery更改单选按钮检查状态

6 个答案: