顯示不只是當檢查

我在https://jsfiddle.net/pinchetpooche/xgugjojq/5/顯示不只是當檢查

我想，如果是的是在頁面加載檢查，這顯示了檢查的結果演示安裝。這隻有當我回去檢查是，即使它已經被檢查也是有效的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head profile="http://gmpg.org/xfn/11"> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function(){ 

    if ($('.trigger').is(':checked')) { 
      $('.content').hide(); 
      $('.' + $(this).data('rel')).show();        
      } 

    $('.trigger').click(function() { 
      $('.content').hide(); 
      $('.' + $(this).data('rel')).show();  
    }); 
}); 

</script> 

<style> 

.gads { 
    border:none; 
    background-color:transparent; 
    outline:none; 
} 

.content { 
    display: none; 
} 

.none { 
    border:none; 
    background-color:transparent; 
    outline:none; 
} 

.ee { 
    border:none; 
    background-color:transparent; 
    outline:none; 
} 

.et { 
    border:none; 
    background-color:transparent; 
    outline:none; 
} 

.gads-yes { 
    border:none; 
    background-color:transparent; 
    outline:none; 
} 

.gads-no { 
    border:none; 
    background-color:transparent; 
    outline:none; 
} 

.gads-na { 
    border:none; 
    background-color:transparent; 
    outline:none; 
} 

.ee-yes { 
    border:none; 
    background-color:transparent; 
    outline:none; 
} 

.ee-no { 
    border:none; 
    background-color:transparent; 
    outline:none; 
} 

</style> 

</head> 

<BODY> 


<div id="content"> 
<form id="form1" name="form1" method="post" action="add_incident.asp"> 

<table border="0" class="formset" > 

    <tr> 
     <td>&nbsp;</td> 
    </tr> 

    <tr> 
     <td><label class="style8">Event?</label></td> 
     <td>  
     <input type="radio" name="age1" value="Yes" class="gads-yes trigger" data-rel="gads-yes" /><span class="style8"> Yes</span> 
     <input type="radio" name="age1" value="No" class="gads-no trigger" data-rel="gads-no" /><span class="style8"> No</span> 
     <input type="radio" name="age1" value="NA" class="gads-na trigger" data-rel="gads-na" /><span class="style8"> NA</span> 
     </td> 
    </tr> 

</table> 

<div> 
    <div class="gads-yes content"> 

<table border="0" class="formset"> 

    <tr> 
     <td class="style9">MENU</td> 
    </tr> 


    <tr> 
     <td><label for="description" class="style8">Description</label></td> 
     <td colspan="2" class="textarea"><textarea class="textbox2" id="description" name="description" rows="3"></textarea></td> 
    </tr> 

    <tr> 
     <td colspan="3" align="right"><input type="submit" name="submit3" value="Submit" class="form_button_clear" /></td> 
    </tr> 
</table> 

</div> 
<div class="gads-no content"> 

<table border="0" class="formset" > 

    <tr> 
     <td colspan="4" class="style9">MENU 2</td> 
    </tr> 

    <tr> 
     <td><label for="description1" class="style8">Description Two</label></td> 
     <td colspan="3"><textarea id="description1" name="description1" rows="3" class="textbox2"></textarea></td> 
    </tr> 


    <tr> 
     <td colspan="4" align="right"><input type="submit" name="submit2" value="Submit" class="form_button_clear" /></td> 
    </tr> 
</table> 
</div> 
</div> 

</form> 

</body> 
</html>

來源

2016-04-28 pinchetpooche

嘗試'$（'input.gads- '';'trigger'（'click'）;'在你的代碼後面 –

更改您的JS爲以下：

<script> 
    $(document).ready(function(){ 
     $('.trigger').on('click', function() { 
      $('.content').hide(); 
      $('.' + $(this).data('rel')).show();  
     }).filter(':checked').trigger('click'); 
    }); 
</script>

首先綁定click事件，然後觸發它在頁面加載的過濾:checked元素。

來源

2016-04-28 21:19:30

足夠奇怪了，即使：input type =「radio」name =「age1」value =「Yes」class =「gads -yes trigger「data-rel =」gads-yes「checked />我猜我需要首先排除故障。我必須離開的一天，但我很欣賞你們都投入。 – pinchetpooche

它可以與上面的代碼一起工作。看到fork：https://jsfiddle.net/xgugjojq/8/ –

這樣做的工作，謝謝！ – pinchetpooche

變化選擇器在如果使用的：當量（0）

$(document).ready(function(){ 

if ($('.trigger:eq(0)').is(':checked')) { 
     $('.content').hide(); 
     $('.' + $('.trigger:eq(0)').data('rel')).show();        
     } 



$('.trigger').click(function() { 
     $('.content').hide(); 
     $('.' + $(this).data('rel')).show();  
});

}）;

Example

，或者您可以使用GADS，是選擇

$('.' + $('.gads-yes').data('rel')).show();

來源

2016-04-28 21:20:48 LTasty

你可以只使用）隱藏的回調（：

$(document).ready(function(){  
     //Wait until the content's hidden before showing the selected item 
     $(".content").hide(function(){ 
      $("." + $(".trigger:checked").data("rel")).show(); 
     }); 

    $('.trigger').click(function() { 
     $('.content').hide(); 
     $('.' + $(this).data('rel')).show();  
    }); 
});

來源

2016-04-28 21:30:20

顯示不只是當檢查

回答

相關問題