Question

我有一个复选框，我需要在点击时显示div。我有3个不同的javascripts，我试图让它与之合作。

//function showhide() {
//    var checkbox = document.getElementById("assist");
//    var expanded1 = document.getElementById("expanded");
//    var expanded2 = document.getElementById("expanded2");

//    expanded1.style.visibility = (expanded1.style.visibility == 'false') ? "true" : "false";
//    alert('test');
//}
function(){
var checkbox = document.getElementById("assist");
var expanded1 = document.getElementById("expanded");
var expanded2 = document.getElementById("expanded2");
checkbox.onchange = function () {
    expanded1.style.visibility = this.checked ? 'true' : 'false';
    alert('test');

}
//function check() {
//    $('chk').click(function () {
//        if (this.checked) {
//            $("#expanded").show();
//            $("#expanded2").show();
//        }
//        else {
//            $("#expanded").hide();
//            $("#expanded2").hide();
//        }
//    });
//}

这是下面的复选框。

<input type="checkbox" runat="server" id="assist"  onclick="showhide();" /></div>

需要显示/隐藏的div扩展和扩展2。

我无法从复选框中获取javascript函数，有人可能会告诉我出了什么问题。

Answer 1

使用window.onload事件分配更改处理程序并从HTML中删除内联onclick。可见性CSS也应该是visible或hidden。

Fiddle

window.onload = function () {
    var checkbox = document.getElementById("assist");
    var expanded1 = document.getElementById("expanded");
    checkbox.onchange = function () {
        expanded1.style.visibility = this.checked ? 'visible' : 'hidden';
    };
};

Answer 2

要使用Jquery隐藏DIV，您可以尝试下面的代码：

而不是this.checked使用$(this).is(':checked')

 $('.chk').click( function () {
    var $this = $(this);
    if( $this.is(':checked') == true ) {
       $("#div1").show();        
    }  else {
       $("#div1").hide();

    }    
});

Answer 3

HTML

 <input type="checkbox" runat="server" id="assist"  onclick="showhide();" />



            <div class="required1" id="mycheckboxdiv1" style="display:none" >
                your code;
            </div>

这将为你做:) jquery的

<script>
$(document).ready(function() {

    $('#mycheckboxdiv1').hide();

    $('#assist').click(function(){


            if($('#assist').is(':checked')){

                        $('#mycheckboxdiv1').toggle();
              }
          else 
              {
                $('#mycheckboxdiv1').hide();

              }
       });

});

</script>

http://jsfiddle.net/maree_chaudhry/QmXCV/这里是小提琴

Answer 4

你已经在使用jQuery了，所以你可以使用：

$("#assist").change(function(){
   $("#expanded, #expanded2").toggle();
});

jsFiddle here

复选框oncheck javascript

4 个答案: