如果选中,如何更改复选框的值?

时间:2015-01-16 18:35:59

标签: javascript jquery html

当我从0-1

检查它时,我想更改复选框的值

这就是我试过的

HTML

        <input type="checkbox" name="Semi Annual" id="1" value="0">
        Semi Annual <br>


        <input type="checkbox" name="Quaterly" id="2" value="0">
        Quaterly <br>


        <input type="checkbox" name="Monthly" id="3" value="0">
        Monthly <br>

JS

    $('input[type="checkbox"]').change(function(){
                 this.value = 1;
    });

演示:http://codepen.io/evoque2015/pen/RNpOLq

1 个答案:

答案 0 :(得分:1)

以下jsfiddle通过将值从0切换为1来执行您想要执行的操作,反之亦然,具体取决于是否选中它们。

每个循环都带有日志演示,您实际上并不需要这样做。 默认情况下,.checked属性在onchange中已设置为true或false,因此您应该只使用它。

HTML

<input type="checkbox" name="Semi Annual" id="1" value="0">
        Semi Annual <br>
<input type="checkbox" name="Quaterly" id="2" value="0">
        Quaterly <br>
<input type="checkbox" name="Monthly" id="3" value="0">
        Monthly <br>

JS

$('input[type="checkbox"]').change(function(){

    // Changes value to 1 or 0 depending on whether it is checked or not
    if(this.value == 0){
        this.value = 1;
    }
    else{
        this.value = 0;  
    }

    // Log shows the value of each checkbox and also that the .checked property does the same thing by default
    $('input[type="checkbox"]').each(function(index, element){
        if(element.checked){
            console.log(this.name + ' has value of ' + this.value);
            console.log(this.name + ' is checked');   
        }
        else{
            console.log(this.name + ' has value of ' + this.value);
            console.log(this.name + ' is not checked');             
        }
    });
});