Question

这是Html：

<div class="form-group col-sm-12" id="myDiv" align="right">
    <input class="coupon_question" id="theControl" name="cadre_number" type="checkbox" onchange="valueChanged()" value="0" > change</input>
</div>

<div class="form-group col-sm-12" id="endDiv" style="display:none" align="right">
    <span><label class="radio" id="end1">date</label></span>
    <input class = "radio" value="2016-10-10" checked="" type="date">
    <span><label class="radio" id = "end3">case</label></span>
    <input class = "radio" type="text">
</div>

这是Java脚本： -

function valueChanged(){
    if($('.coupon_question').is(":checked")){
        document.getElementById("endDiv").style.display = 'block';
    }

    else{
        document.getElementById("endDiv").style.display = 'none';
    }
}

问题是当我勾选复选框时，div中没有任何反应＆＃39; endDiv＆＃39;！

Answer 1

我认为你没有添加任何jquery.js来使用jquery方法。因为当我将jquery.js添加到我的html中时它工作正常。

希望这有用。

Answer 2

如果您使用的是jQuery，那么您的代码就可以正常运行，但是如果label和div关闭而没有启动代码，则会出现一些错误。

我想你想这样做：

<input type="checkbox" id="theControl" class="coupon_question" name="cadre_number" onchange="valueChanged()" value="0">
<div class="form-group col-sm-12" id="endDiv" style="display:none" align="right">
    <label class="radio" for="end1">تاريخ الإنهاء </label>
    <input type="date" id="end1" class="radio" value="2016-10-10">
    <label class="radio" for="end3">سبب الإنهاء</label>
    <input type="text" id="end3" class="radio">
</div>

如果您不使用jQuery，请改变您的JavaScript if条件：

function valueChanged(){
    if(document.querySelector('#theControl').checked){
        document.querySelector("#endDiv").style.display = 'block';
    }
    else{
        document.querySelector("#endDiv").style.display = 'none';
    }
}

Answer 3

<input type="checkbox" onclick="onClickHandler()" id="theControl" />

<script>
function onClickHandler(){
    if($('.coupon_question').is(":checked")){
           $("#endDiv").show();
     }

     else{
          $("#endDiv").hide();
     }

}
</script>

Answer 4

代码工作正常!!我想你还没有添加jquery库！

function valueChanged(){
        if($('.coupon_question').is(":checked")){
            document.getElementById("endDiv").style.display = 'block';
        }

        else{
            document.getElementById("endDiv").style.display = 'none';
        }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div class="form-group col-sm-12" id="myDiv" align="right">
                                    <input class="coupon_question" id="theControl" name="cadre_number" type="checkbox" onchange="valueChanged()" value="0"/ > change
                                    </div>

                                    <div class="form-group col-sm-12" id="endDiv" style="display:none" align="right">
                                            <span><label class="radio" id="end1">date</label></span>
                                            <input class = "radio" value="2016-10-10" checked="" type="date">

                                            <span><label class="radio" id = "end3">case</label></span>
                                            <input class = "radio" type="text">
                                    </div>

Answer 5

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $('#theControl').change(function(){
        if(this.checked)
            $('#myDiv').show();
        else
            $('#endDiv').hide();
    });
});
</script>
</head>
<body>
<div class="form-group col-sm-12" id="myDiv" align="right">
    <input class="coupon_question" id="theControl" name="cadre_number" type="checkbox" onchange="valueChanged()" value="0" > change</input>
</div>

<div class="form-group col-sm-12" id="endDiv" style="display:none" align="right">
    <span><label class="radio" id="end1">date</label></span>
    <input class = "radio" value="2016-10-10" checked="" type="date">
    <span><label class="radio" id = "end3">case</label></span>
    <input class = "radio" type="text">
</div>
</body>
</html>

这段代码有什么不对，它没有显示div

5 个答案: