CODEWITHSUNDEEP
javascriptjquerydomcheckbox
Mohammad Umar
Mohammad Umar

Reputation: 1792

Change checkbox value on click

I have checkbox nested in html elements. I want to target it and manipulates its value when somebody check it. I am trying this

jQuery(document).ready(function() {
  jQuery('#my-form .checkbox-value input').click(function() {
    jQuery('#my-form .checkbox-value input[value=yes]').prop('checked', jQuery(this).prop('checked'));
    jQuery('#my-form .checkbox-value input[value=no]').prop('checked', jQuery(this).prop('checked') === false);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
  <div id="checkbox" class="checkbox-value">
    <label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
    <ul id="checkbox_item">
      <li class="choice-1 depth-1">
        <input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="Want to change this value on dom" />
        <label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
      </li>
    </ul>
  </div>

  <div class="">
    <button type="submit">Submit</button>
  </div>

</form>

When someone click on label or checkbox it should changes values to yes if it is checked and no when it is not checked.

Upvotes: 0

Views: 2252

Answers (3)

Doğuş Deniz
Doğuş Deniz

Reputation: 65

If what you are trying to do is to pull the first assignment from the input value, it would be more logical to give a special id and process the elements with that id.

I hope the code below will enlighten you.

jQuery(document).ready(function() {
    var my_inputs = jQuery('#my-form .checkbox-value input');
    
    jQuery('#my-form .checkbox-value input').click(function() {
        
        //jQuery('#my-form .checkbox-value input[value=yes]').prop('checked', jQuery(this).prop('checked'));
        //jQuery('#my-form .checkbox-value input[value=no]').prop('checked', jQuery(this).prop('checked') === false);
        
        $("#status").html(my_inputs.prop('checked') ? "true" : "false")
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="my-form">
        <div id="checkbox" class="checkbox-value" >
            <label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
            <ul id="checkbox_item">
                <li class="choice-1 depth-1">
                    <input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="Want to change this value on dom" />
                    <label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
                </li>
            </ul>
        </div>
        
    <div class="">
        <button type="submit">Submit</button>
    </div>
</form>

<p>
  <span>input checked status : <code id="status"></code></span>
</p>

Upvotes: 0

Bernhard Beatus
Bernhard Beatus

Reputation: 1216

This should do it.
It's working with click event handler also.

$(document).ready(function() {
  $('#my-form .checkbox-value input').click(function() {
    if ($(this).prop("checked")) {
      console.log('yes');
      $(this).val('yes');
    } else {
      console.log('no');
      $(this).val('no');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
  <div id="checkbox" class="checkbox-value">
    <label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
    <ul id="checkbox_item">
      <li class="choice-1 depth-1">
        <input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="no" />
        <label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
      </li>
    </ul>
  </div>

  <div class="">
    <button type="submit">Submit</button>
  </div>
</form>

Upvotes: 1

Alexandre Elshobokshy
Alexandre Elshobokshy

Reputation: 10922

You could use this to target .on('change', '#my-form .checkbox-value input', function(){})

$(document).ready(function() {
  $(document).on('change', '#my-form .checkbox-value input', function() {
    console.log($(this).val())
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<form id="my-form">
  <div id="checkbox" class="checkbox-value">
    <label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
    <ul id="checkbox_item">
      <li class="choice-1 depth-1">
        <input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="Want to change this value on dom" />
        <label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
      </li>
    </ul>
  </div>

  <div class="">
    <button type="submit">Submit</button>
  </div>
</form>

And use if($(this).is(':checked')) to check if the box is checked

Upvotes: 2

Related Questions