如果选中复选框,则显示选择字段
Show select field if checkbox is checked
美好的一天,如果选中
复选框,我遇到了一些麻烦,如何显示选择字段
<div class="checkbox">
<br>
<label style="padding-right:0px;"><input type="checkbox" name="cod" value="1" > My shop offers <b>Cash on Delivery</b></label>
</div>
<select name="" id="" style="padding-left:0px;">
<option value="">Around Metro Manila Only</option>
<option value="">Outside Metro Manila Only</option>
<option value="">Both</option>
</select>
您必须具有
select
输入元素id
属性才能标识该元素并将其用作jQuery
选择器。
.change()
将在复选框上触发change
事件并调用处理程序,处理程序最初将显示/隐藏选择输入。
编辑:使用.toggle()
显示或隐藏匹配的元素。布尔参数将决定匹配元素的可见性。
$('[name="cod"]').on('change', function() {
$('#select').toggle(this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="checkbox">
<br>
<label style="padding-right:0px;">
<input type="checkbox" name="cod" value="1">My shop offers <b>Cash on Delivery</b>
</label>
</div>
<select name="" style="padding-left:0px;" id='select'>
<option value="">Around Metro Manila Only</option>
<option value="">Outside Metro Manila Only</option>
<option value="">Both</option>
</select>
这是您的问题的解决方案,请检查此
.css
select.selectDrop{
display:none;
}
.html
<input type="checkbox" name="seeds" value="Indigofera" /> <span> My shop offers <b>Cash on Delivery</b></span>
<select class="selectDrop" name="" id="" style="padding-left:0px;">
<option value="">Around Metro Manila Only</option>
<option value="">Outside Metro Manila Only</option>
<option value="">Both</option>
</select>
jquery
$('[type="checkbox"][name="seeds"]').change(function(){
$('select.selectDrop').toggle(this.checked);
});
这是工作小提琴示例。
您也可以使用切换事件,如果选中复选框将显示选择框,否则隐藏。
请注意,您需要为选择框使用 id 属性
id="selectBox"
例:
$('[name="cod"]').click(function() {
$("#selectBox").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="checkbox">
<br>
<label style="padding-right:0px;"><input type="checkbox" name="cod" value="1" > My shop offers <b>Cash on Delivery</b></label>
</div>
<select name="" id="selectBox" style="padding-left:0px;display:none;">
<option value="">Around Metro Manila Only</option>
<option value="">Outside Metro Manila Only</option>
<option value="">Both</option>
</select>
试试这个
<div class="checkbox">
<br>
<label style="padding-right:0px;"><input type="checkbox" name="cod" value="1" > My shop offers <b>Cash on Delivery</b></label>
<?php $test=$_GET['test']?>
<select name="test" id="" style="padding-left:0px;">
<option <?php if($test==1) echo 'selected'?> value="1">Around Metro Manila Only</option>
<option <?php if($test==2) echo 'selected'?> value="2">Outside Metro Manila Only</option>
<option <?php if($test==3) echo 'selected'?> value="3">Both</option>
</select>
<</div>
div class="answers"> 不确定要选择哪个选项,但可以更改 .selectedIndex 值以更改它。
<!DOCTYPE html>
<html>
<body>
<div class="checkbox">
<br>
<label style="padding-right:0px;"><input type="checkbox" name="cod" value="1" onclick="selectItem(this.checked)"> My shop offers <b>Cash on Delivery</b></label>
</div>
<select name="" id="myList" style="padding-left:0px;">
<option value="">Around Metro Manila Only</option>
<option value="">Outside Metro Manila Only</option>
<option value="">Both</option>
</select>
</body>
</html>
<script>
function selectItem(isChecked){
if(isChecked){
document.getElementById('myList').selectedIndex=1;
}else{
document.getElementById('myList').selectedIndex=0;
}
}
</script>
相关文章:
- 使用较少代码隐藏和显示选择菜单内容的更好方法是什么?javascript
- 首先显示选择最多的项目
- 根据以前的选择显示选择选项
- 在屏幕上显示选择选项图像
- 如何在Jquery中显示选择选项之前更新这些选项
- 在外部触发器上显示选择框选项
- 如何显示隐藏和显示选择框
- 使用javascript显示选择列表中的值
- 用js突出显示选择菜单
- Javascript 代码显示选择值
- Jquery/JS:通过样式显示显示选择框(无,块)
- KnockoutJS不显示选择
- JS/AJAX:隐藏/显示选择框
- 并排显示选择框中的两个选项
- 如果选中复选框,则显示选择字段
- 如何在D3部队布局中突出显示/选择邻居的邻居
- 显示选择下拉列表中的结果,然后克隆并添加另一个选择
- 显示选择选项文本日期
- 如何更改相同的 ng 重复值并仅显示选择值 angularjs
- CognosReportStudio:在报告中显示选择和搜索提示中的搜索词和选项