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

I have created a group of checkBox where my aim is to select one checkbox and get another checkbox deselected.

I have successfully achieved that using the solution from Stackoverflow.

Now, I am trying to get the value of the checkbox on select. The main issue here is that when I select a checkbox sometimes I get the previous value rather than the current value.

Example - When I click a checkbox with label 5, I get 5. Then, I click 10 sometimes I get 10 but more often than not it shows 5. When I go next 15 then my previous value is shown i.e. 10 and so on.

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

CodePudding user response：

Your issue is: on the 2nd click the $("input[name='" this.name "']:checked") contains 2 checkboxes (see console.log(checkboxes.length)) but:

.val() will always give the value of only the first one.

So tick 15, then tick 25 and .val() gives 15.
Tick 25, then tick 15 and .val() gives 15 (because it has the lower index)

Fix is to use this to get the current checkbox:

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

CodePudding user response：

In one sentence, you face this bug because you are the logging value of your checkbox before flushing other checked boxes. To fix this Just put

console.log(checkboxes.val());

after your

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

It will surely fix your issue.

In addition :

I would suggest the usage of radio buttons instead of checkboxes as it fits the requirement most accurately, i.e. user must be able to select only 1 option. If it is purely due to aesthetic choice its up to you.
One more nerdy comment you can still output correct value even w/o changing flow code which is using console.log(this.value) instead of console.log(checkboxes.val())

CodePudding user response：

Consider the following.

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

This essentially unchecks any other checkboxes, to ensure only one is checked at any time. The User can uncheck their selection as well and you will need additional code for the Custom entry.

CodePudding user response：

Here's your form

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

And here's your JS code

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

    console.log(box);
    }
  });