如何在未提交表单的情况下获得选中或取消选中复选框的值
How to get value of checkbox on check or uncheck without submit form
我想在有人选中或取消选中复选框时更改值。下面是我的代码:
<?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>
}
首先,您需要设置一个事件侦听器来侦听更改事件并触发一个函数。
如果你给你的元素id
,你可以使事情更容易地针对该元素。
您还需要将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>
如果您对上述源代码有任何疑问,请在下面留下评论,我会尽快回复您。
。checkbox DOM元素的checked属性会告诉你该元素的checked状态。
<input id="chktype" type="checkbox" class="chkone"><br>
if(document.getElementById('chktype').checked) {
alert('Checked');
} else {
alert('Not Checked');
}
Maybe:
$('.yourcheckbox').click(function() {
if( $('.yourcheckbox').is(":checked") ) {
do stuff
} else {
do other stuff
}
});
您可以使用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>
修改代码:
<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
{
}
});
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 使用Jquery选择或取消选择ListView中的所有复选框
- 使用jquery选中/取消选中单个复选框
- 使用javascript在页面加载时取消选中所有复选框
- (取消)使用单独的复选框激活复选框列表
- jQuery-取消选中复选框
- 单击或取消选中复选框时,如何创建弹出的自定义窗口
- Javascript选中/取消选中所有复选框并将值写入文本区域
- dojo/cbtree取消选中所有复选框并选中选中复选框
- 通过选中和取消选中复选框来添加和删除数组中的值
- 当与之关联的 ng-model 为 false 时,Angularjs 复选框值不会取消选中
- 取消复选框未进行可视化更新
- 复选/取消复选框不能与prop功能一起工作
- 在剑道ui网格中上下滚动时取消复选框
- 检查条件后使用jQuery取消复选框
- 当另一个复选框被选中时,取消复选框,但如果被选中,也取消复选框
- JQuery .prop函数不工作,取消复选框
- 取消复选框绑定
- 如何在不取消复选框的情况下通过Ajax更新复选框列表
- 绑定点击事件后无法取消复选框