如何使用javascript显示和隐藏按钮?

时间:2013-11-20 11:58:05

标签: javascript jquery asp.net checkbox

我试图通过javascript函数显示和隐藏<fieldset>中的按钮。但它无效。我没有发现我的错误。

我的FieldSet:

<fieldset class="buttons">
  <dx:ASPxButton ID="btn11" runat="server" Text="Buton 1">
  </dx:ASPxButton>
</fieldset>

我的复选框:

<input class="checkbox" id="ShowHideButton" name="ShowHideButton" type="checkbox" onchange="valueChanged()" />
<label for="ShowHideButton">ShowHideButton</label>

我的JavaScript功能。

<script type="text/javascript">
  function valueChanged() {
    if ($('#ShowHideButton').is(":checked"))
      $(".buttons").show();
    else
      $(".buttons").hide();
  }
</script>

3 个答案:

答案 0 :(得分:3)

在客户端,按钮的实际ID不会是ShowHideButton ASP会为它生成一个唯一的ID。

您需要在javascript中通过clientid访问它。

试试这个:

function valueChanged()
{
    if ($('#<%=ShowHideButton.ClientID%>').is(":checked"))
        $(".buttons").show();
    else
        $(".buttons").hide();

}

答案 1 :(得分:2)

尝试使用

http://jsfiddle.net/modaloda/7ZNzF/

$(document).ready(function() {
//set initial state.
$('#ShowHideButton').val($(this).is(':checked'));

$('#ShowHideButton').change(function() {
    if($(this).is(":checked")) {
        var returnVal = confirm("Are you sure?");
        $(this).attr("checked", returnVal);
    }else{
        alert("sd");
    }
    $('#ShowHideButton').val($(this).is(':checked'));        
});
});

答案 2 :(得分:1)

谢谢大家。我解决了。我是个傻瓜,我忘了添加这个库

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>