javascript - 复选框 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，那么如果未单击该复选框，该值将无效，还是仍会发送该值...

我只是喜欢这个..

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';
}