如果未选择textarea
选项,我试图隐藏other
。我没有收到任何错误,所以我猜语法是正确的,但是我猜事件监听器是不正确的。我也尝试过使用focus()
代替click()
,因为我认为input
可能不会注册为click
。这些都不起作用。
HTML:
<div>
<input type="radio" name="when" value="time" />
<br />
<input type="radio" name="when" value="count" />
<br />
Other:
<input type="radio" name="when" value="other" />
<br />
<textarea name="when_other"></textarea>
</div>
Javascript:
<script type="text/javascript">
$("input[name='when']").click(function() {
if($("input[name='when']").value == 'other'){
$("text[name='when_other']").attr('display', 'block');
} else {
$("text[name='when_other']").attr('display', 'none');
$("text[name='when_other']").html('');
}
});
</script>
以上也是标记出现的顺序,HTML优先,JS尾随。页面上也没有动态内容,因此我认为不需要live()
/ on()
。
您的代码有一些小错误,对此进行比较:
textarea {display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="radio" name="when" value="time" />
<br />
<input type="radio" name="when" value="count" />
<br />
Other:
<input type="radio" name="when" value="other" />
<br />
<textarea name="when_other"></textarea>
</div>
<script type="text/javascript">
$("body").on("click","input[name='when']",function() {
if($("input[name='when']:checked").val()== 'other'){
$("textarea[name='when_other']").css('display', 'block');
} else {
$("textarea[name='when_other']").css('display', 'none');
$("textarea[name='when_other']").val('');
}
});
</script>
在您的JavaScript中,只需这样做,这将解决您的问题
var $selectAll = $( "input:radio[name=when]" );
$selectAll.on( "change", function() {
if($("input[name='when']:checked").val() != "other")
{
$("#when_other").hide();
}
else{
$("#when_other").show();
}
}
并且在您的html中,将id像这样添加到您的文本区域中
<textarea id="when_other" name="when_other"></textarea>
切换如何?
$(":input[name='when']").on("change", function () {
$("textarea[name='when_other']").toggle(this.value === 'other' && this.checked);
//alert('click');
}).change();
textarea {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="radio" name="when" value="time" />
<br />
<input type="radio" name="when" value="count" />
<br />
Other:
<input type="radio" name="when" value="other" />
<br />
<textarea name="when_other"></textarea>
</div>
您可以通过使用jQuery中的this
来完成。
$(document).ready(() => {
$('input[name ="when"]').click(function() {
$("textarea").show();
if ($(this).val() == "other")
$("textarea").show();
else
$("textarea").hide();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="radio" name="when" value="time" />
<br />
<input type="radio" name="when" value="count" />
<br /> Other:
<input type="radio" id="show_other" name="when" value="other" />
<br />
<textarea name="when_other"></textarea>
</div>