单击更改复选框值

Question

我在 html 元素中嵌套了复选框。当有人检查它时，我想瞄准它并操纵它的价值。我正在尝试这个

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>

当有人点击标签或复选框时，如果选中则应将值更改为 yes，未选中时应将值更改为 no。

Answer 1

您可以使用它来定位 .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>

并使用if($(this).is(':checked'))检查复选框是否被选中

Answer 2

这应该可以做到。
它也与点击事件处理程序一起工作。

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

Answer 3

如果您要做的是从输入值中提取第一个赋值，那么给出一个特殊的 id 并处理具有该 id 的元素会更合乎逻辑。

希望下面的代码能给您带来启发。

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>

单击更改复选框值

Change checkbox value on click

javascript

checkbox

jquery

dom