HTML输入复选框始终返回false

时间:2020-03-03 16:32:30

标签: javascript jquery html

我知道已经有人问过这个问题。我检查了有关该主题的所有先前问题,但找不到解决方案。

这是问题所在:我有两个输入,一个是复选框,另一个是带有三个可能选择的收音机。在函数内部,我必须首先查看是否选中了第一个复选框,如果是,我将使用if else语句检查其他一些内容,否则该函数将继续执行。单选输入将稍后出现在同一功能内。该选项将检查先前已检查的三个选项中的哪一个,并将设置一个等于该选项的值的变量。为了查看该复选框是否被选中,我将jQuery与.is(':checked')一起使用,但是即使我选中了它们,它也会返回false。有想法吗?

很抱歉,如果我没有正确使用Stack Overflow,但这是我的第一个问题。

这是HTML,input#geoloc_waypoint_active,单选是#locomotion_radio

<div id="create_route_modal_content" class="modal-body">
  <div id="geo_switch">
    <div id="geoSwitchDiv">
      <label for="geoloc_waypoint_active">
      Usa la tua posizione
      </label>
      <label class="switch">
        <input id="geoloc_waypoint_active" class="form-check form-check-inline" type="checkbox">
        <span class="slider round"></span>
      </label>
    </div>
    <br>
    <div id="locomotion_radio">
      <label><input class="locomInput" type="radio" name="locomotion" value="walking" checked><img class='locomotionImg' src='immagini/walking.png'></label>
      <label><input class="locomInput" type="radio" name="locomotion" value="cycling"><img class='locomotionImg' src='immagini/cycling.png'></label>
      <label><input class="locomInput" type="radio" name="locomotion" value="driving"><img class='locomotionImg' src='immagini/driving.png'></label>
    </div>      
DrawOnMap() {
  let formattedCoord = "";
  let geoposition = $('#geoloc_waypoint_active').is(':checked');
  console.log(geoposition)
  if (geoposition) {
    var geoL = $('#geo_Locator .mapboxgl-ctrl .mapboxgl-ctrl-icon');
    if (!map.getLayer('points') && geoL.attr('aria-pressed') === 'false') {
      alert("L'utente non ha una posizione attualmente attiva.");
      return;
    } else {
      this.waypoints.unshift(window.userPosition);
    }
  }

  if (this.waypoints.length < 2) {
    alert("Devi inserire almeno due punti di interesse.");
    return;
  }

  this.waypoints.forEach((waypoint, index, source) => {
    formattedCoord += waypoint[0] + "," + waypoint[1];
    if (index < source.length - 1) {
      formattedCoord += ";";
    }
  });

  let locomotion = $('input[name=locomotion]:checked').val();

let geoposition = $('#geoloc_waypoint_active').is(':checked');始终为false,因此它永远不会输入if

let locomotion = $('input[name=locomotion]:checked').val();相同,它找不到选中的对象并设置了运动

1 个答案:

答案 0 :(得分:0)

您是否尝试过此 $(“#geoloc_waypoint_active”)[0]。选中,它将为您提供控制权。

$(document).ready(function(){
 console.log($("#geoloc_waypoint_active")[0].checked)
 $('#check').on('click',function(){
    console.log($("#geoloc_waypoint_active")[0].checked)
 })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input value='checkVakue' type='button' id='check'/>
<div id="create_route_modal_content" class="modal-body">
  <div id="geo_switch">
    <div id="geoSwitchDiv">
      <label for="geoloc_waypoint_active">
      Usa la tua posizione
      </label>
      <label class="switch">
        <input id="geoloc_waypoint_active" class="form-check form-check-inline" type="checkbox">
        <span class="slider round"></span>
      </label>
    </div>
    <br>
    <div id="locomotion_radio">
      <label><input class="locomInput" type="radio" name="locomotion" value="walking" checked><img class='locomotionImg' src='immagini/walking.png'></label>
      <label><input class="locomInput" type="radio" name="locomotion" value="cycling"><img class='locomotionImg' src='immagini/cycling.png'></label>
      <label><input class="locomInput" type="radio" name="locomotion" value="driving"><img class='locomotionImg' src='immagini/driving.png'></label>
    </div>

相关问题