如何在 checkBox select 上获取确切的唯一值，而其他 checkBox 已取消 selected？ (jQuery)

Question

我创建了一组复选框，我的目标是 select 一个复选框并获取另一个复选框 deselected.

我已经使用 Whosebug 的解决方案成功实现了这一目标。

现在，我正在尝试获取 select 上复选框的值。这里的主要问题是，当我 select 一个复选框时，有时我会得到以前的值而不是当前值。

示例 - 当我单击带有标签 5 的复选框时，我得到 5。然后，我单击 10，有时我得到 10，但通常它显示 5。当我进入下一个 15 时，会显示我之前的值，即10等等。

  $("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/

Answer 1

这是您的表格

<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);
    }
  });

Answer 2

一句话，你面临这个错误因为在刷新其他复选框之前你是你的复选框的记录值。要解决此问题，只需将

console.log(checkboxes.val());

在你

之后

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

一定会解决您的问题。

另外：

我建议使用单选按钮而不是复选框它最准确地符合要求，即用户必须能够 select只有1个选项。如果纯粹是出于审美选择，那它就起来了给你。
再多一个书呆子评论，即使 w/o 更改使用 console.log(this.value) 而不是 console.log(checkboxes.val())

Answer 3

考虑以下因素。

$(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>

这实际上是取消选中任何其他复选框，以确保任何时候只选中一个。用户也可以取消选中他们的选择，您将需要自定义条目的附加代码。

Answer 4

您的问题是：2 日点击 $("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>

如何在 checkBox select 上获取确切的唯一值，而其他 checkBox 已取消 selected？ (jQuery)

How to get the exact unique value on checkBox select while other checkBox is deselected? (jQuery)

checkbox

jquery