【问题标题】:check if radio is selected doesn't do anything检查是否选择了收音机不做任何事情
【发布时间】:2020-10-07 05:13:42
【问题描述】:

我有两个单选按钮,当我选择一个选项以继续使用代码时,我想要它,但我不能,因为什么都没有出现。这是整个代码

$(function() {
  $("#tratamientos").click(function() {
    let valorSelect = $("#tratSelect").val();
    let valor = $('input:radio:checked').val();
    if (valor == 'rojo') {
      if (valorSelect == 2) {
        alert('Extracción indicada es una prestación requerida.')
        $('#tratSelect').val('none')

      }
    }
  });

});

if ($("#prestRequerida").is(':checked')) {
  alert('ha seleccionado prestacion requerida')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<form id="tratamientos">

  <div class="col-md-4">
    Seleccione el tipo de Prest. requerida
    <div class="form-inline">
      <!-- <input type="radio" id="prestExistente" name="colorPrestacion" value="1"> -->
      <input type="radio" id="prestExistente" name="colorPrestacion" value='rojo'>
      <div class="mr-1"></div>
      <font style="color:red"> Prestaciones existentes</font>
    </div>
    <div class="row">
      <div class="col-md-12">
        <input type="radio" id="prestRequerida" name="colorPrestacion" value='azul'>
        <font style="color:blue"> Prestaciones requeridas</font>
      </div>
    </div>
  </div>

  <select class="col-md-4" name="" id="tratSelect">
    <option value='none' selected disabled>Seleccione referencia</option>
    <option value="2">Extracción requerida</option>

  </select>
</form>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

我尝试了不同的方法,但我不明白为什么另一种方法有效,而这种方法无效

这是工作的人

$(function () {
    $("#tratamientos").click(function () {
        let valorSelect = $("#tratSelect").val();
        let valor = $("input:radio:checked").val();
        if (valor == "rojo") {
            if (valorSelect == 2) {
                alert("Extracción indicada es una prestación requerida.");
                $("#tratSelect").val("none");
            }
        }
    });
});

还有这些

if ($("#prestExistente").is(':checked')) {
    console.log('ha seleccionado prestacion existente')
}
       let val= $('input:radio[name=colorPrestacion]:checked').val()
   if (val=="rojo") {
       alert(' seleccion prestacion existente')
   }

单选按钮的 if 条件也不必在函数中,这就是为什么我没有将它放在另一个函数中

【问题讨论】:

  • 你的 jQuery 选择器 #prestExistente 是输入元素吗?在这种情况下,只有输入元素使用 :checked 属性。
  • 第二个 if 不在点击回调中。
  • 是的,它是一个输入元素,如果不将它插入到 click 函数中,我怎样才能使它工作?
  • 我把它包裹在一个 $(document).ready(function() {})
  • @LuzBritez 如果你不把它放在事件处理程序中,它只会在页面第一次加载时运行,在用户选择一个按钮之前。

标签: javascript html jquery radio-button


【解决方案1】:

您最后的if 语句也应该在click 事件处理程序中:

$(function () {
    $("#tratamientos").click(function () {
        let valorSelect = $("#tratSelect").val();
        let valor = $('input:radio:checked').val();
        if (valor == 'rojo') {
            if (valorSelect == 2) {
                alert('Extracción indicada es una prestación requerida.')
                $('#tratSelect').val('none')

            }
        }
        //Right here VVV
        if ($("#prestRequerida").is(':checked')) {
            alert('ha seleccionado prestacion requerida')
        }
        //Right here ...
    });

});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-08-26
    • 2013-03-17
    • 2016-05-29
    • 1970-01-01
    • 1970-01-01
    • 2014-04-15
    • 2017-04-04
    • 1970-01-01
    相关资源
    最近更新 更多