Show/hide 选择其他无线电时的文本区域 - jQuery 事件未被触发
Show/hide textarea when other radio selected - jQuery Event Not Being Fired
如果未选择 other
选项,我将尝试隐藏 textarea
。我没有收到任何错误,所以我猜语法是正确的,但我猜事件监听器不正确。我也尝试用 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()
我认为不需要。
在您的 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>
你的代码有一些小错误,对比这个:
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>
您可以在 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>
Toggle 怎么样?
$(":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>
如果未选择 other
选项,我将尝试隐藏 textarea
。我没有收到任何错误,所以我猜语法是正确的,但我猜事件监听器不正确。我也尝试用 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()
我认为不需要。
在您的 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>
你的代码有一些小错误,对比这个:
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>
您可以在 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>
Toggle 怎么样?
$(":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>