如何在不提交表单的情况下获取选中或取消选中复选框的值答案

【问题标题】：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>
}

【问题讨论】：

标签： javascript php jquery checkbox

【解决方案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
        {

        }
    });

【讨论】：