单击时更改复选框值

Posted

技术标签:

【中文标题】单击时更改复选框值【英文标题】:Change checkbox value on click 【发布时间】:2021-10-25 14:29:12 【问题描述】:

我在 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。

【问题讨论】:

考虑使用.change() 而不是.click()。请参阅:api.jquery.com/change(有关底层 javascript 的更多信息,请参阅:developer.mozilla.org/en-US/docs/Web/API/HTMLElement/…) 我认为我无法正确定位 @MohammadUmar 随时投票/标记为回答了对您有帮助的答案 :) 干杯 【参考方案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'))检查该框是否被选中

【讨论】:

【参考方案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>

【讨论】:

考虑在 jQuery 中切换到 .on( “change”, handler ),因为它会考虑动态生成的元素。 它也与点击处理程序一起使用。查看我的代码。 正如我所说... 如果它们是动态生成的【参考方案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>

【讨论】:

以上是关于单击时更改复选框值的主要内容,如果未能解决你的问题,请参考以下文章

单击复选框时更改标签颜色

单击时更改复选框背景?

我可以更改 UiPath.Core.UiElement 中的属性值吗

当对象中的字段发生更改时如何从 v-model 数组中删除对象

单击操作栏项目复选框时,更改其状态

JQuery 正在更改复选框值,但复选框未显示为选中状态