单击radiobutton时,JQuery slidedown()slideup()

时间:2013-11-06 19:34:24

标签: javascript jquery html

我是Javascript的新手,似乎无法找到我正在寻找的信息。 当点击“是”单选按钮时,我试图让另一个div向下滑动,当单击“否”时向上滑动。但是,当我点击任何一个时,什么也没发生。这是我目前的代码:

HTML:

<div class="field">
<label for="">Apprentice</label>
<div class="topRadio">
<input name="apprentice" group="apprentice" type="radio" value="Yes" onclick="dropbcitdown()">
<label for="">Yes</label>
<input name="apprentice" group="apprentice" type="radio" value="No" onclick="pickbcitup()">
<label for="">No</label>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>

<div class="field slidingdiv" id="doyouattend">
<label for="">Do you attend BCIT?</label>
<div class="topRadio">
<input name="bcit" group="bcit" type="radio" value="Yes" onclick="droptransportationdown()">
<label for="">Yes</label>
<input name="bcit" group="bcit" type="radio" value="No" onclick="picktransportationup()">
<label for="">No</label>
<div class="clear"></div>
</div>
<div class ="clear"></div>
</div>

<div class="field slidingdiv" id="doyouneed">
<label for="">Do you need ground transportation to city hall?</label>
<div class="topRadio">
<input name="transportation" group="transportation" type="radio" value="Yes">
<label for="">Yes</label>
<input name="transportation" group="transportation" type="radio" value="No">
<label for="">No</label>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>

的Javascript

<script>
function bcitDown() {
    $("#doyouattend").slideDown("slow" function() {
        $(this).css({
        display: "inline";
        })
    })
}

function bcitUp() {
    $("#doyouattend").slideUp("slow" function() {
        $(this).css({
        display: "none";
        })
    })
}

function transportationDown() {
    $("#doyouneed").slideDown("slow" function() {
        $(this).css({
        display: "inline";
        })
    })
}

function transportationUp() {
    $("#doyouneed").slideUp("slow" function() {
        $(this).css({
        display: "none";
        })
    })
}
</script>

我也尝试过使用radiobuttons的值,但我不能在它们下拉之前提交for。不相关,但是如果有人想知道为什么会发生这种情况,那么就会“断线”。我没有尝试过这样做,并没有得到不同的结果。 如果我发出明显的语法错误,或者这最终成为我完全错过的一个明显的解决方案,我很抱歉。我觉得我已经尝试了一切。 注意:我已经包含了JQuery。

2 个答案:

答案 0 :(得分:4)

首先添加Jquery库

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

尝试之后:

<script>
$(document).ready(function(){
    $('input[name=apprentice]').click(function(){
    if ($(this).val() == 'yes')
    {
       $("#yourdiv").slideDown('slow');
    }
    else
    {
       $("#yourdiv").slideUp('slow');
    }
    });

}):
</script>

答案 1 :(得分:1)

您只能将jquery函数应用于 jquery对象。通过使用getElementById()进行选择,您将获得DOM对象,但不会获得Jquery对象。这就是你在函数中使用$(this)来改变css的原因。

我建议使用:

function dropbcitdown() {
    $("#doyouattend").slideDown("slow" function() {
        $(this).css({
        display: "inline";
        })
    })
}