Question

这里我试图通过选择给定的文本框来显示div ClinicFieldSet和HospitalFieldset。如果两者都被选中，则应显示ClinicFieldset和HospitalFieldset，如果选中了其中一个复选框，则应显示选择了哪个div。

我的脚本的问题是，当单击其中一个复选框时，两个复选框都被选中，并且也无法取消选中它们。所以请建议我解决这个问题：（

我在两个复选框中都使用了Javascript onClick来应用它们。

<script type="text/javascript>

   var clinic = document.getElementById('clinic');
    var visit = document.getElementById('visit');

    if((clinic.checked = true) && (visit.checked = true) )
        {
        document.getElementById('ClinicFieldSet').style.display='block';
        document.getElementById('HospitalFieldSet').style.display='block';
        }
        else if((clinic.checked = true) && (visit.checked = false))
        {
        document.getElementById('ClinicFieldSet').style.display='block';
        document.getElementById('HospitalFieldSet').style.display='none';
        }
    else if((clinic.checked = false) && (visit.checked = true))
        {
        document.getElementById('ClinicFieldSet').style.display='none';
        document.getElementById('HospitalFieldSet').style.display='block';
        }
        else
        {   
        document.getElementById('ClinicFieldSet').style.display='none';
        document.getElementById('HospitalFieldSet').style.display='none';
        }

HTML

<input type="checkbox" name="type" id="clinic" onClick="dispp();" >Clinic Practice
<input type="checkbox" name="type" id="visit" onClick="dispp();" >Visiting Hospital

Answer 1

在if语句中使用==相等运算符。

单个=用于分配值，而不是测试其相等性。

Answer 2

我可以建议使用经过略微修改的html修改后的方法（不使用内联点击处理程序），只是为了让JavaScript更简单：

HTML：

<input type="checkbox" name="type" id="clinic" /><label for="clinic">Clinic Practice</label>
<input type="checkbox" name="type" id="hospital" /><label for="hospital">Visiting Hospital</label>

<div id="clinicInfo">
    <h2>Clinic information</h2>
</div>

<div id="hospitalInfo">
    <h2>Hospital information</h2>
</div>

JavaScript的：

document.getElementById('hospitalInfo').style.display = 'none';
document.getElementById('clinicInfo').style.display = 'none';

var inputs = document.getElementsByTagName('input');

function dispp() {
    if (this.checked) {
        document.getElementById(this.id + 'Info').style.display = 'block';
    }
    else {
        document.getElementById(this.id + 'Info').style.display = 'none';
    }
}

for (i = 0; i < inputs.length; i++) {
    if (inputs[i].type.toLowerCase() == 'checkbox') {
        inputs[i].onchange = dispp;
    }
}

JS Fiddle demo

Answer 3

试试这个

if(clinic.checked == true)
        {
        document.getElementById('ClinicFieldSet').style.display='block';
        }
        else
        {
        document.getElementById('ClinicFieldSet').style.display='none';
        }
if(visit.checked == true)
        {
        document.getElementById('HospitalFieldSet').style.display='block';
        }
        else
        {   
        document.getElementById('HospitalFieldSet').style.display='none';
        }

Answer 4

var form = document.forms.add form.elements.check.addEventListener（'change'，function（e）{ e.preventDefault（） var check = document.querySelector（'。check'）如果（check.checked =真） { document.querySelector（ ' '内）。的style.display =' 块' } 其他{ document.querySelector（ ' '内）。的style.display =' 无' } }）

使复选框显示div

4 个答案: