使用jquery通过id获取单选按钮的值[重复]

Posted 2023-03-05

【中文标题】使用jquery通过id获取单选按钮的值[重复]

【英文标题】：Getting value of radio button by id using jquery [duplicate]

【发布时间】：2021-05-02 03:30:32

【问题描述】：

我对 jQuery 有点陌生，所以遇到了一些麻烦。如何编码以通过其 id 获取单选按钮的值？从任何其他类似问题提出的解决方案让我感到困惑。以下是代码：

$(document).on("click", "#Update", function() 
  let id = $(this).data('id');
  let tank_name = $(this).data('tank_name');
  let title = $(this).data('title');
  let tank_maintain = $(this).data('tank_maintain');
  let work_status = $(this).data('work_status');

  $("#t_maintenanceID").val(id);
  $("#tank_name").val(tank_name);
  $("#title_maintenance").val(title);
  $("#tank_maintain").val(tank_maintain);
  $("work_status:checked").val(work_status);

);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="form-group">
  <div class="row">
    <label class="col-form-label col-sm-2 pt-0">Priority:</label>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="work_status" id="work_status" value="High">
        <label class="form-check-label" for="work_status">
                  High
                </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="work_status" id="work_status" value="Medium">
        <label class="form-check-label" for="work_status">
                  Medium
                </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="work_status" id="work_status" value="Low">
        <label class="form-check-label" for="work_status">
                  Low
                </label>
      </div>
    </div>
  </div>
</fieldset>

【问题讨论】：

ID 必须是唯一的

阅读第一段developer.mozilla.org/en-US/docs/Web/html/Global_attributes/id

还有：***.com/questions/9454645/…

【参考方案1】：

您不应使用重复的元素 ID。 HTML 属性 id 是唯一值。

$('input[name=work_status]:checked').val() 会帮助你。

【参考方案2】：

用途：

 $('input[name=work_status]:checked').val()

请注意，所有单选按钮都使用相同的 id，每个 dom 元素的 id 必须是唯一的。

【参考方案3】：

ID 必须是唯一的

您可以使用名称并包装标签（请参阅我对 HTML 所做的更改）

如果您需要在另一个事件中获取选中的值而不是单击收音机本身，请使用

$("[name=work_status]:checked").val()

这样

$(function() 
  $(document).on("click", "[name=work_status]", function() 
    let id = $(this).val()
    console.log(id)
  );
  $("#Update").on("click", function() 
    const workStatus = $("[name=work_status]:checked").val();
    console.log(workStatus)
  )
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="form-group">
  <div class="row">
    <label class="col-form-label col-sm-2 pt-0">Priority:</label>
    <div class="col-sm-10">
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="radio" name="work_status"  value="High"> High
        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="radio" name="work_status"  value="Medium"> Medium
        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="radio" name="work_status" value="Low"> Low
        </label>
      </div>
    </div>
  </div>
  <button id="Update" type="button">Click</button>
</fieldset>

【参考方案4】：

首先，确保每个元素都有一个唯一的 id，这将允许您专门定位您想要的元素。

那么你可以使用这个： $("input[name=work_status]:checked").val()