Jquery 单选按钮值未更改

Question

需要一些帮助，我搜索了 google 但没有找到。

我正在尝试更新 div class "size-number" 中的无线电按钮值。我想在下面的 ajax 请求中使用该值。当我检查元素时，单选按钮具有可用按钮的更新值，但是当我 console.log 它在 jquery 中时，它给了我相同的初始值，尽管我选择了。我尝试将单选按钮设置为 checked="checked"。我也相信这是默认值的问题。我还尝试了 jquery 中的输入验证。此外，我还尝试在 jquery 中引用输入 ("input[name='radiobten']:checked")。任何建议将不胜感激！

$(".size-number").click(function(){
  
  var modelid = $("#modelval").attr('value');
  console.log(modelid);
 
  $.ajax({
    url: '"Example API"',
    data:  [],
    dataType: 'json',
    type: "GET",
    success: function(res){
      var newarr = (res).filter(function(indx){
        return indx.model_cat_id == modelid
      });
      console.log(newarr)
      $('modelselect').slideToggle(200).html(res);
    }});
});

<?php foreach ($brands as $brand){ ?>
    <div class="search-select">
        <i class="fas fa-chevron-down"></i>
        <a href="/<?php echo $brand->full_slug.$urlSize; ?>">
        
        <?php echo $brand->name; ?></a>
        
    </div>
    <?php
        $slugCurrent = $brand->slug;
        foreach ($models as $model){
            if($model->brand_id == $brand->id){
            if(is_null($model->model_cat_id)){?>
                <div class="size-number" style="display: none;">
                    <a href="/<?php echo $brand->slug; ?>/<?php echo $model->slug_full.$urlSize; ?>" style="color: blue;"><?php echo $model->name; ?><input type="radio" id="modelval" name="radiobten" value="<?php echo $model->id?>"/></a>
                </div>

                <?php    
            }
                
            }
        }
    }?>

Answer 1

您不能有多个具有相同 ID 的元素，即：modelval。这将始终为您提供第一个单选按钮的值，无论您 choose.Instead 使用哪个按钮 class 来获取单选按钮 button.So 的值，点击 div 您可以使用 $(this).find("yourclassname").attr('value') 仅获取该特定按钮的值。

演示代码：

$(".size-number").click(function() {
  //div->find closest modelval->value
  var modelid = $(this).find(".modelval").attr('value');
  console.log(modelid);

  $.ajax({
    url: '"Example API"',
    data: [],
    dataType: 'json',
    type: "GET",
    success: function(res) {
      var newarr = (res).filter(function(indx) {
        return indx.model_cat_id == modelid
      });
      console.log(newarr)
      $('modelselect').slideToggle(200).html(res);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="size-number" >
  <a href="/<?php echo $brand->slug; ?>/<?php echo $model->slug_full.$urlSize; ?>" style="color: blue;">Abc<input type="radio" class="modelval" name="radiobten" value="1"/></a>
</div>
<div class="size-number" >
  <a href="/<?php echo $brand->slug; ?>/<?php echo $model->slug_full.$urlSize; ?>" style="color: blue;">Xyz<input type="radio" class="modelval" name="radiobten" value="2"/></a>
</div>

Jquery 单选按钮值未更改

Jquery Radio button value not changing

html

php

ajax

jquery

radio-button