如何在取消選擇其他復選框時獲取復選框選擇的確切唯一值？(jQuery)-有解無憂

我創建了一組復選框，我的目標是選擇一個復選框并取消選擇另一個復選框。

我使用 Stackoverflow 的解決方案成功地實作了這一點。

現在，我試圖在選擇時獲取復選框的值。這里的主要問題是，當我選擇一個復選框時，有時我會得到以前的值而不是當前值。

示例 - 當我單擊帶有標簽 5 的復選框時，我得到 5。然后，我單擊 10 有時會得到 10，但通常它會顯示 5。當我進入下一個 15 時，會顯示我之前的值，即 10，依此類推。

如何在取消選擇其他復選框時獲取復選框選擇的確切唯一值？(jQuery)

  $("form :input").change(function () {
    var checkboxes = $("input[name='"   this.name   "']:checked");
    console.log(checkboxes.val());
    if (checkboxes) {
      $(checkboxes).not(this).prop("checked", false);
     }
     
});
});

<form action="#" method="post">
        <div class="cal_box">
          <div class="part1">
            

            <div class="bill_input">
              <label for="custom_tip">Select Tip %</label>
              <div class="tip_btn_group">
                <input type="checkbox" name="tip" id="tip5" value="5" />
                <label class="btn_box" for="tip5">5%</label>
                <input type="checkbox" name="tip" id="tip10" value="10" />
                <label class="btn_box" for="tip10">10%</label>
                <input type="checkbox" name="tip" id="tip15" value="15" />
                <label class="btn_box" for="tip15">15%</label>
                <input type="checkbox" name="tip" id="tip25" value="25" />
                <label class="btn_box" for="tip25">25%</label>
                <input type="checkbox" name="tip" id="tip50" value="50" />
                <label class="btn_box" for="tip50">50%</label>
                <input
                  type="text"
                  name="custom_tip"
                  id="tip"
                  value=""
                  placeholder="Custom"
                />
              </div>
            </div>

          
          </div>
        </div>
      </form>

https://jsfiddle.net/mrrajsoni/run821g5/3/

uj5u.com熱心網友回復：

您的問題是：在第二次單擊$("input[name='" this.name "']:checked")包含2 個復選框（請參閱console.log(checkboxes.length)）但是：

.val()將始終只給出第一個的值。

所以勾選15，然后勾選25并.val()給出15。
勾選25，然后勾選15并.val()給出15（因為它的索引較低）

修復是用來this獲取當前復選框：

$(function() {
  $("form :input").change(function() {
    $("input[name='"   this.name   "']:checked").not(this).prop("checked", false);  
    console.log($(this).is(":checked") ? $(this).val() : "none")
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label for="custom_tip">Select Tip %</label>
  <div class="tip_btn_group">
    <input type="checkbox" name="tip" id="tip5" value="5" />
    <label class="btn_box" for="tip5">5%</label>
    <input type="checkbox" name="tip" id="tip10" value="10" />
    <label class="btn_box" for="tip10">10%</label>
    <input type="checkbox" name="tip" id="tip15" value="15" />
    <label class="btn_box" for="tip15">15%</label>
    <input type="checkbox" name="tip" id="tip25" value="25" />
    <label class="btn_box" for="tip25">25%</label>
    <input type="checkbox" name="tip" id="tip50" value="50" />
    <label class="btn_box" for="tip50">50%</label>
    <input type="text" name="custom_tip" id="tip" value="" placeholder="Custom" />
  </div>
</form>

uj5u.com熱心網友回復：

一句話，您面臨這個錯誤是因為您是重繪其他復選框之前復選框的日志記錄值。解決這個問題就放

console.log(checkboxes.val());

在你之后

if (checkboxes) {
      $(checkboxes).not(this).prop("checked", false);
}

它肯定會解決您的問題。

此外：

我建議使用單選按鈕而不是復選框，因為它最符合要求，即用戶必須只能選擇 1 個選項。如果這純粹是由于審美選擇，則由您決定。
再一個討厭的評論，即使不更改正在使用的流代碼，您仍然可以輸出正確的值console.log(this.value)而不是console.log(checkboxes.val())

uj5u.com熱心網友回復：

考慮以下。

$(function() {
  $(".tip_btn_group input[type='checkbox']").change(function(event) {
    var $self = $(this);
    var tip;
    $(".tip_btn_group input[type='checkbox']").not($self).prop("checked", false);
    if ($(".tip_btn_group input[type='checkbox']:checked").length == 0) {
      tip = 0;
    } else {
      tip = parseInt($self.val());
    }
    console.log(tip);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="post">
  <div class="cal_box">
    <div class="part1">
      <div class="bill_input">
        <label for="custom_tip">Select Tip %</label>
        <div class="tip_btn_group">
          <input type="checkbox" name="tip" id="tip5" value="5" />
          <label class="btn_box" for="tip5">5%</label>
          <input type="checkbox" name="tip" id="tip10" value="10" />
          <label class="btn_box" for="tip10">10%</label>
          <input type="checkbox" name="tip" id="tip15" value="15" />
          <label class="btn_box" for="tip15">15%</label>
          <input type="checkbox" name="tip" id="tip25" value="25" />
          <label class="btn_box" for="tip25">25%</label>
          <input type="checkbox" name="tip" id="tip50" value="50" />
          <label class="btn_box" for="tip50">50%</label>
          <input type="text" name="custom_tip" id="tip" value="" placeholder="Custom" />
        </div>
      </div>
    </div>
  </div>
</form>

這基本上取消了任何其他復選框的選中，以確保在任何時候都只選中一個。用戶也可以取消選中他們的選擇，您將需要額外的代碼用于自定義條目。

uj5u.com熱心網友回復：

這是你的表格

<form action="#" method="post">
    <div class="cal_box">
      <div class="part1">
        

        <div class="bill_input">
          <label for="custom_tip">Select Tip %</label>
          <div class="tip_btn_group">
            <input type="checkbox" name="tip" id="tip5" value="5" />
            <label class="btn_box" for="tip5">5%</label>
            <input type="checkbox" name="tip" id="tip10" value="10" />
            <label class="btn_box" for="tip10">10%</label>
            <input type="checkbox" name="tip" id="tip15" value="15" />
            <label class="btn_box" for="tip15">15%</label>
            <input type="checkbox" name="tip" id="tip25" value="25" />
            <label class="btn_box" for="tip25">25%</label>
            <input type="checkbox" name="tip" id="tip50" value="50" />
            <label class="btn_box" for="tip50">50%</label>
            <input
              type="text"
              name="custom_tip"
              id="tip"
              value=""
              placeholder="Custom"
            />
          </div>
        </div>

      
      </div>
    </div>
  </form>

這是你的 JS 代碼

$('input[type=checkbox]').on('change',function(){
    var box = $("input[name = " this.name "]" ":checked").val();
    if(box){

    console.log(box);
    }
  });

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/358727.html

標籤：查询复选框

上一篇：Jquery驗證GreaterThanEqual和LessThanEqual在數字9以上無法正常作業

下一篇：防止用戶注冊不同的電子郵件域