如何在不提交表单的情况下获取选中或取消选中复选框的值
Posted
技术标签:
【中文标题】如何在不提交表单的情况下获取选中或取消选中复选框的值【英文标题】：How to get value of checkbox on check or uncheck without submit form 【发布时间】：2015-12-10 09:14:04 【问题描述】：当有人选中或取消选中复选框时，我想更改值。这是我的代码：
<?php
if($params['status'] == "2")
?>
<div class="pull-right" id="confirm-ship">
<input type="checkbox" class="chkone"><br>
if(checkbox == check)
<span>Confirmed</span>
else
<span>Not Confirmed</span>
</div>
<?php
?>
当有人点击复选框而不提交页面或重新加载页面时，我想显示确认或未确认的消息。可以吗，有人帮帮我吗？
我只是在上面的场景中添加了下面的代码，只是为了给出一个想法。
if(checkbox == check)
<span>Confirmed</span>
else
<span>Not Confirmed</span>
【问题讨论】：
【参考方案1】：首先您需要设置一个事件监听器来监听更改事件并触发一个函数。
如果你给你的元素id's，你可以让事情更容易定位到那个元素。
您还需要将 javascript 放入 <script> 标记中。有些人将它们放在页面的正文或最底部。就我个人而言，我喜欢将我的标签放在<head> 中，因为使用window.onload 只会在页面加载后尝试getElementById()。
window.onload=function() // Trigger when the page is ready
//Set change event
document.getElementById('Confirmation').addEventListener('change', Confirm, false);
function Confirm()
var Confirmation=document.getElementById('Confirmation').checked;
var Message;
if(Confirmation)
Message="Confirmed";
else
Message="Not Confirmed"
document.getElementById('Result').innerhtml=Message;
<input type="checkbox" id="Confirmation" />
<span id="Result">Not Confirmed</span>如果您对上述源代码有任何疑问，请在下方留言，我会尽快回复您。
【讨论】：
@MuhammadAwais 非常欢迎您。如果您有任何问题，请随时提出，如果需要，我会显示更多详细信息/解释。 听起来不错。目前，它运行良好。当然，如果对 JS 有任何疑问，我会告诉你。非常感谢您的友好回复。【参考方案2】：复选框 DOM 元素的 .checked 属性会告诉您该元素的选中状态。
<input id="chktype" type="checkbox" class="chkone"><br>
if(document.getElementById('chktype').checked)
alert('Checked');
else
alert('Not Checked');
【讨论】：
【参考方案3】：也许：
$('.yourcheckbox').click(function()
if( $('.yourcheckbox').is(":checked") )
do stuff
else
do other stuff
);
【讨论】：
【参考方案4】：您可以使用 jQuery 来实现。在 head 部分中包含 jQuery 文件：
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<?php
if($params['status'] == "2") ?>
<div class="pull-right" id="confirm-ship">
<input type="checkbox" class="chkone"><br>
<span></span>
</div>
<?php
?>
<script>
$('.chkone').change(function()
if($(this).prop('checked')==true)
$('span').html('Confirmed');
else
$('span').html('Not Confirmed');
);
</script>
【讨论】：
很简单，你可以试试这个【参考方案5】：只需更改您的代码：
<div class="pull-right" id="confirm-ship">
<input type="checkbox" class="chkone" id="chkone"><br>
使用javascript：
$('.chkone').click(function()
if($(this).is(':checked'))
//if checked do something
else
);
【讨论】：
以上是关于如何在不提交表单的情况下获取选中或取消选中复选框的值的主要内容，如果未能解决你的问题，请参考以下文章