复选框 onclick 不会更改通过 jscript 检查

Question

我有 3 个复选框，我希望能够单击该框并打开/关闭它，并通过 jscript 更改输入值以发布到状态天气项目是否在另一个页面上被接受。但是我有逻辑脚本，但它不起作用，没有错误，但复选框不会点击/关闭，他们只是点击就可以了..而且值不会改变，我不明白为什么。

谁能看看这个简短的代码并告诉我原因。

谢谢。

<input  type="checkbox" id="paypal" name="paypal1"  value=" " onclick='chbxpp();' >
</input>
<label for="paypal" class="checkboxes" >Show PayPal Accepted</label>

<br>

<input   type="checkbox" id="facebook"  name="facebook"  value=" "  onclick='chbxfb(this);' >
</input>
<label for="facebook" class="checkboxes"  >Show FaceBook Contact Details</label>

<br>

<input   type="checkbox" id="twitter"  name="twitter"  value=" "  onclick='chbxtw(this);' >
</input>
<label for="twitter" class="checkboxes"  >Show Twitter Contact Details</label>



function chbxpp()
{

if(document.getElementById('paypal').checked === true) {
document.getElementById('paypal').checked = false;
document.getElementById('paypal').value='no';

var vv=document.getElementById('paypal').value;
console.log(vv);
}

if (document.getElementById('paypal').checked === false) {
document.getElementById('paypal').checked = true;
document.getElementById('paypal').value='yes';
var vv=document.getElementById('paypal').value;
console.log(vv);
}

}




function chbxfb(objfb)
{
var that = objfb;

(objfb);

if(document.getElementById(that.id).checked === true) {
document.getElementById(that.id).checked = false;
document.getElementById(that.id).value='no';

var vv=document.getElementById(that.id).value;

console.log(vv);

}

if (document.getElementById(that.id).checked === false) {
document.getElementById(that.id).checked = true;
document.getElementById(that.id).value='yes';

var vv=document.getElementById(that.id).value;

console.log(vv);

}

}



function chbxtw(objtw)
{
var that = objtw;
(objtw);


if(document.getElementById(that.id).checked === true) {
document.getElementById(that.id).checked = false;
document.getElementById(that.id).value='no';
var vv=document.getElementById(that.id).value;
console.log(vv);
}

if (document.getElementById(that.id).checked === false) {
document.getElementById(that.id).checked = true;

document.getElementById(that.id).value='yes';

var vv=document.getElementById(that.id).value;

console.log(vv);

}

}

objpp 是我对另一种方法的尝试，但只是做了同样的事情......

p.s 如果我只是没有使用 jscript 并且只有 html，如果未单击复选框，则该值是否无效或仍会发送该值...

iv 只是喜欢这个..

How to change the value of a check box onClick using JQuery?

表示如果未选中该框，则不会发送该值...但是在发布已单击的内容后我怎么知道...我会收到 not isset($_POST['paypal']) 还是一个空的（$_POST['paypal']）

Answer 1

我想你的复选框从里面没有检查或 .checked === false 开始，但是当你调用你的函数 chbxpp() 时，它会查看你的 .checked 属性是否 === true，如果是，它会设置它回到假。点击事件已经为您更改了复选框的 .checked 属性，无需在您的代码中进行。

//If the checkbox is checked, set it to not checked...??? 
//But the problem is, the click event just set the .checked property to true
//so setting it back to false makes it like it never happened.
if(document.getElementById('paypal').checked === true) {
   //document.getElementById('paypal').checked = false; //This part is a no-no
   document.getElementById('paypal').value='yes';

}else{
   document.getElementById('paypal').value='no';
}

Answer 2

添加到 Ryan Wilson 的答案，将您的 cbx 的初始值设置为 false。 （还要检查 cbx 的格式 - 结束标记。）

<input  type="checkbox" id="paypal" name="paypal1"  value="false" onchange="chbxpp();" />

function chbxpp() {

    // the cbx starts false. when it is clicked for the first time it
    // becomes true.

    if (document.getElementById('paypal').checked) {
        // you don't need this.
        //document.getElementById('paypal').checked = true;
        document.getElementById('paypal').value = 'yes';

        var vv = document.getElementById('paypal').value;
        console.log(vv);
    } else {
        // you also don't need this.
        //document.getElementById('paypal').checked = false;
        document.getElementById('paypal').value = 'no';
        var vv = document.getElementById('paypal').value;
        console.log(vv);
    }
}