复选框值0或1

Hel*_*rse 6 html javascript css jquery

在许多情况下,我有如下复选框

 <input type="checkbox" name="custom7" value="1" id="custom7"
 checked="checked"> <label for="custom7">Email me more info?</label>
Run Code Online (Sandbox Code Playgroud)

现在,当选中复选框时,值应为1,如值= 1.如果取消选中该复选框,我希望该值为零,如值= 0.我怎样才能做到这一点?

pha*_*kat 13

只是为了一个屁股,并提供一个稍短的答案:

$('input[type="checkbox"]').change(function(){
    this.value = (Number(this.checked));
});
Run Code Online (Sandbox Code Playgroud)

  • 如果你想要更短,请使用`this.value = + this.checked;` (6认同)
  • @Ian比我想你错过了我的答案:D (2认同)

Hel*_*rse 8

谢谢你的工作

$('#custom7').on('change', function(){
   this.value = this.checked ? 1 : 0;
   // alert(this.value);
}).change();
Run Code Online (Sandbox Code Playgroud)

链接:http: //jsfiddle.net/WhQaR/


Rok*_*jan 6

不要忘记bitwise XOR运营商:

$('input[type="checkbox"]').on('change', function(){
    this.value ^= 1;
});
Run Code Online (Sandbox Code Playgroud)

$('input[type="checkbox"]').on('change', function(){
    this.value ^= 1;
    console.log( this.value )
});
Run Code Online (Sandbox Code Playgroud)
<label><input type="checkbox" name="accept" value="1" checked> I accept </label>
<label><input type="checkbox" name="accept" value="0"> Unchecked example</label>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
Run Code Online (Sandbox Code Playgroud)


Дми*_*ков 5

非常简单的方法

<input type="hidden" name="is_active" value="0" />
<input type="checkbox" name="is_active" value="1" />
Run Code Online (Sandbox Code Playgroud)

更改全局复选框行为方式

document.addEventListener('DOMContentLoaded', e => {
for (let checkbox of document.querySelectorAll('input[type=checkbox]')) {
    checkbox.value = checkbox.checked ? 1 : 0;
    checkbox.addEventListener('change', e => {
            e.target.value = e.target.checked ? 1 : 0;
       });
    }
});
Run Code Online (Sandbox Code Playgroud)