选中和取消选中时如何为html中的复选框分配值？

Question

我的HTML表单中有一个HTML复选框。 现在，我想在选中时分配1，在不选中时分配0。 那么，我该如何使用jquery或java脚本呢？

<!DOCTYPE html>
<html>

  <script language="javascript" type="text/javascript">
  <!--
  function greeter() {
      alert(document.getElementById(vehicleChkBox).value);
  }
  $('#vehicleChkBox').change(function(){
       if($(this).attr('checked')){
            $(this).val(1);
       }else{
            $(this).val(0);
       }
  });
  </script>
  <body>
    <form>
      <input type="checkbox" name="vehicle" id="vehicleChkBox" value="FALSE" />
      <input type="submit" onsubmit="greeter()">
    </form>
  </body>

我尝试了这个。 但是，不起作用。

Answer 1

JS：

var checkbox = document.querySelector("input[type='checkbox']");
  checkbox.addEventListener("change",function(){
     this.value = this.checked ? 1 : 0;
  });

jQuery的：

$(":checkbox").change(function(){
     $(this).val($(this).is(":checked") ? 1 : 0);
});

Answer 2

您可以将JQuery用于change事件：

 $(function() { $('#vehicleChkBox').on('change', function(e) { e.stopPropagation(); this.value = this.checked ? 1 : 0; }); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="vehicle" id="vehicleChkBox" value="0" />

Answer 3

您只需要将其值设置为1。这样，当它被选中时将返回1，而在未被选中时将不返回任何内容，因此您可以进行检查并分配零。

<input type="checkbox" name="my_checkbox" value="1" />

Answer 4

我正在使用此，这绝对正常：

$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");

注意：如果选中此复选框，它将返回true，否则未定义，因此最好检查“ TRUE”值。

要么

if(!$("#checkkBoxId").is(':checked') ){
 $(this).val('1');
}
else
$(this).val('0');

Answer 5

这将很好地设置值

   $("#checkkBoxId").prop("checked") ? ($("#checkkBoxId").val(1)) :    ($("#checkkBoxId").val(0));

Answer 6

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script> 
   $(document).ready(function() {
         $('#vehicleChkBox').click(function(){
             if($(this).is(':checked'))
             {              
                  $(this).val('1');
             }
             else
             {
                 $(this).val('0');
             }
         });
    });
</script>

选中和取消选中时如何为html中的复选框分配值？

问题描述

6 个解决方案

解决方案1
1 2014-09-29 11:35:07

解决方案2
1

解决方案3
0 2014-09-29 11:31:29

解决方案4
0 2014-09-29 11:32:03

解决方案5
0 2014-09-29 11:34:20

解决方案6
0 2014-09-29 11:51:09

选中和取消选中时如何为html中的复选框分配值？

问题描述

6 个解决方案

解决方案1 1 2014-09-29 11:35:07

解决方案2 1

解决方案3 0 2014-09-29 11:31:29

解决方案4 0 2014-09-29 11:32:03

解决方案5 0 2014-09-29 11:34:20

解决方案6 0 2014-09-29 11:51:09

解决方案1
1 2014-09-29 11:35:07

解决方案2
1

解决方案3
0 2014-09-29 11:31:29

解决方案4
0 2014-09-29 11:32:03

解决方案5
0 2014-09-29 11:34:20

解决方案6
0 2014-09-29 11:51:09