检查复选框是不是被选中而不单击它
Posted
技术标签:
【中文标题】检查复选框是不是被选中而不单击它【英文标题】：Check if checkbox is checked without clicking it检查复选框是否被选中而不单击它 【发布时间】：2021-06-08 11:53:00 【问题描述】：我有一个输入复选框，该复选框已被修改为一个用于approve 987654326 reject reject @时检查它检查框等。一旦选择了第三个按钮save提交。如果我在不使用按钮的情况下选中该框，我的脚本可以正常工作，但是我会失去已经与按钮关联的其他功能。
以下代码基于Update order status via AJAX in WooCommerce Order received page
我如何才能监听和检测复选框是否已被选中，即使它是通过选择按钮选中而不是实际的复选框。
$(document).ready(function()
$(".wcfa-save-button").click(function()
if ($("input[type=checkbox]").is(":checked").length > 0)
alert("Check box is Checked");
$('button.wcfa-save-button').click(function(e)
e.preventDefault();
$.ajax(
type: 'POST',
dataType: 'json',
url: "woocommerce_params.ajax_url",
data:
'action': 'redeem_complete',
'order_id': orerId, // Here we send the order Id
,
success: function(response)
$('.response').text("Order data successfully fetched.");
console.log("Order data successfully fetched.");
);
);
else
alert("Check box is Unchecked");
);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="wcfa-attachment" class="wcfa-hidden" id="wcfa-approved-result" data-id="attachmentID">
<button id="wcfa-approve-button-ID" class="button wcfa-approve-button" data-approval="approved" data-id="attachmentID">Approve</a>
<button id="wcfa-reject-button-attachmentID" class="button wcfa-reject-button" data-approval="rejected" data-id="attachmentID">Reject</a>
<button class="button wcfa-save-button wcfa-disable-during-transition" data-id="attachmentID">Save</button>更新无法定位复选框，最终检查wcfa-approve-active-button的approve按钮.hasClass然后发送提交
$('button.wcfa-save-button').click( function(e)
e.preventDefault();
if ( $('.wcfa-approve-button').hasClass('wcfa-approve-active-button'))
alert("Check box in Checked");
console.log("Checkbox is Checked");
【问题讨论】：
不要在事件中绑定事件 你能把问题中的代码最小化吗？ php 部分完全无关紧要，将其剥离为仅足以重现问题的代码（例如，Ajax 功能与您的生产代码相关，但只会使您的问题复杂化并使其阅读起来更加乏味，尤其是给定你也有PHP穿插在那里）。请：“minimal reproducible example”，这样我们就不必为您删减内容（在每个/每个答案中重复多次）。 您的 html 无效。缺少几个</button> - 不要将链接包装在按钮中或链接中的按钮
您的代码即使使用无效的 HTML 也能按预期工作
因此将点击绑定到元素或表单提交。在该方法内部检查复选框的状态。基本表单验证。
【参考方案1】：
由于这与 WordPress (WooCommerce) 有关，您需要先从 jQuery 开始...然后以下将检测您的复选框是否被选中 （在开始和更改时）...
这是重新访问的代码：
<script>
jQuery(function($)
// On start
if ( $('input[name="wcfa-attachment"]').is(":checked") )
console.log("Start: Checkbox is Checked");
else
console.log("Start: Checkbox NOT Checked");
// On change
$('input[name="wcfa-attachment"]').on('change', function()
if ( $(this).is(":checked") )
console.log("Checkbox is Checked");
$('button.wcfa-save-button').click(function(e)
e.preventDefault();
if (typeof woocommerce_params === 'undefined')
return false;
var orderId = 858; // Set an existing order ID or a dynamic variable with php
$.ajax(
type: 'POST',
dataType: 'json',
url: "woocommerce_params.ajax_url",
data:
'action': 'redeem_complete',
'order_id': orderId, // Here we send the order Id
,
success: function(response)
$('.response').text("Order data successfully fetched.");
console.log("Order data successfully fetched.");
);
);
else
console.log("Checkbox NOT Checked");
);
);
</script>
<input type="checkbox" name="wcfa-attachment" class="wcfa-hidden" id="wcfa-approved-result" data-id="attachmentID" />
<button id="wcfa-approve-button-ID" class="button wcfa-approve-button" data-approval="approved" data-id="attachmentID">Approve</button>
<button id="wcfa-reject-button-attachmentID" class="button wcfa-reject-button" data-approval="rejected" data-id="attachmentID">Reject</button>
<button class="button wcfa-save-button wcfa-disable-during-transition" data-id="attachmentID">Save</button>
经过测试并且有效。
【讨论】：
谢谢，这必须关闭，当实际单击复选框时，我已经设置并登录控制台，但同样的问题仍然存在，如果按钮用于检查复选框控制台没有记录复选框被选中，随后订单状态无法更改为待处理。如果使用了实际的复选框，它确实会成功更改为待处理。 @user2059376 你能否提供你问题中的完整代码，因为它实际上是不可测试的，也许还有更多细节...... 我已经对其进行了排序，如果单击提交时批准按钮.hasClass，而不是针对复选框本身。 $('button.wcfa-save-button').click( function(e) e.preventDefault(); if ( $('.wcfa-approve-button').hasClass('wcfa-approve-active-button')) alert("Check box in Checked"); console.log("Checkbox is Checked");【参考方案2】：
您可以使用“长度”检查复选框是否已选中，您可以执行以下操作：
$(document).ready(function()
function checkIfChecked()
if ($("input[type=checkbox]").is(":checked").length > 0)
alert("Check box is Checked");
$('button.wcfa-save-button').click(function(e)
e.preventDefault();
$.ajax(
type: 'POST',
dataType: 'json',
url: "woocommerce_params.ajax_url",
data:
'action': 'redeem_complete',
'order_id': orerId, // Here we send the order Id
,
success: function(response)
$('.response').text("Order data successfully fetched.");
console.log("Order data successfully fetched.");
);
);
else
alert("Check box is Unchecked");
);
);
【讨论】：
【参考方案3】：a) 一组用于复选框、批准和拒绝按钮的点击监听器
b) 第二次点击监听器用于保存检查复选框状态并触发 ajax
$(document).ready(function()
$("input[type=checkbox], .wcfa-approve-button, .wcfa-reject-button").click(function()
const identifier = $(this).attr('data-identifier');
switch (identifier)
case 'btn-approve':
alert('Approve Clicked');
$("input[type=checkbox]").prop("checked",true);
break;
case 'btn-reject':
alert('Reject Clicked');
$("input[type=checkbox]").prop("checked",false); break;
case 'checkbox':
alert('Checkbox Clicked');
let isChecked = $("input[type=checkbox]:checked").length > 0;
$("input[type=checkbox]").prop("checked", isChecked);
break;
);
$("button.wcfa-save-button").click(function(e)
e.preventDefault();
alert('Save Clicked');
if ($("input[type=checkbox]").is(":checked"))
alert("Check box is Checked");
$.ajax(
type: "POST",
dataType: "json",
url: "woocommerce_params.ajax_url",
data:
action: "redeem_complete",
order_id: 'orerId' // Here we send the order Id
,
success: function(response)
$(".response").text("Order data successfully fetched.");
console.log("Order data successfully fetched.");
);
else
alert("Check box is Unchecked");
);
);
Stackblitz 链接 - https://stackblitz.com/edit/jquery-1mn3mr?file=index.html
【讨论】：
以上是关于检查复选框是不是被选中而不单击它的主要内容，如果未能解决你的问题，请参考以下文章