单击时更改复选框值
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 中的属性值吗