我有这样的表格:
<input type="checkbox" value="First" />First
<input type="checkbox" value="Second" />Second
<input type="checkbox" value="Third" />Third
<select name="first-drop">
<option value="---">---</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
</select>
有没有办法(使用JS / jQuery)只要取消选中first-drop
复选框,我就可以将---
的值更改为First
?
答案 0 :(得分:3)
$('input[type="checkbox"][value="First"]').change(function (){
$('select[name="first-drop"]').toggle();
});
请注意,我修复了你的标记:
<input type="checkbox" value="First" checked="checked" >First
<input type="checkbox" value="Second" />Second
<input type="checkbox" value="Third" />Third
<select name="first-drop">
<option value="">---</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
</select>
<强>更新强>
你现在想要的是:
$('input[type="checkbox"][value="First"]').change(function() {
if (!this.checked) {
$('select[name="first-drop"] option:first').prop('selected', 'selected');
}
});
<强> LIVE DEMO 强>
如果您将提供DOM元素ID,则可以很简单:
$('#first').change(function() {
if (!this.checked)
$('#nothing').prop('selected', 'selected');
});
更新了DOM:
<input type="checkbox" value="First" id="first" >First
<input type="checkbox" value="Second">Second
<input type="checkbox" value="Third">Third
<select name="first-drop">
<option value="" id="nothing" >---</option>
<option value="Option1" >Option1</option>
<option value="Option2">Option2</option>
</select>
<强> LIVE DEMO 强>
答案 1 :(得分:2)
我在第一个复选框中添加了一个ID
<input id="first" type="checkbox" value="First">First</input>
<input type="checkbox" value="Second">Second</input>
<input type="checkbox" value="Third">Third</input>
<select name="first-drop">
<option value="">---</option>
<option value="Option1">Option1</option>
<option value="Option2">$Option2</option>
</select>
<script type="text/javascript">
$(function () {
$("#first").click(function () {
if ($(this)[0].checked == true) {
$("[name='first-drop'] option:first").attr("selected", "selected");
}
});
});
</script>
演示:
编辑:修复我的代码,以便在取消选中第一个复选框时不会切换