我是一个javascript和jQuery的新手,在我的html中有2个单选按钮和一个div。我想在选中第一个单选按钮时显示div,但在其他情况下,我希望它是隐藏的。
所以,如果单选按钮#watch-me被选中--> div #show-me是可见的。如果单选按钮#watch-me被选中 --> div #show-me是可见的.如果单选按钮#watch-me未被选中(两者都未被选中或第二个被选中) --> div #show-me被隐藏。
这是我目前的情况。
<form id='form-id'>
<input id='watch-me' name='test' type='radio' /> Show Div<br />
<input name='test' type='radio' /><br />
<input name='test' type='radio' />
</form>
<div id='show-me' style='display:none'>Hello</div>
和JS。
$(document).ready(function () {
$("#watch-me").click(function() {
$("#show-me:hidden").show('slow');
});
$("#watch-me").click(function(){
if($('watch-me').prop('checked')===false) {
$('#show-me').hide();}
});
});
我应该如何修改我的脚本来实现?
我会这样处理。
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'watch-me') {
$('#show-me').show();
}
else {
$('#show-me').hide();
}
});
});
输入元素应该有值属性 添加它们并使用这个。
$("input[name='test']").click(function () {
$('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none');
});
$('input[name=test]').click(function () {
if (this.id == "watch-me") {
$("#show-me").show('slow');
} else {
$("#show-me").hide('slow');
}
});
$('input[type="radio"]').change(function(){
if($("input[name='group']:checked")){
$(div).show();
}
});
var switchData = $('#show-me');
switchData.hide();
$('input[type="radio"]').change(function(){ var inputData = $(this).attr("value");if(inputData == 'b') { switchData.show();}else{switchData.hide();}});