Question

取消选中复选框后，我必须执行一个事件，然后选择下拉列值设置为空或默认值。

Html代码：

<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
    <i class="tomorrow_8am_10am box">
        <select name="pref_tomorrow_8am_10am">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
    <i class="tomorrow_10am_12pm box">
        <select name="pref_tomorrow_10am_12pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox ">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
    <i class="tomorrow_12pm_2pm box">
        <select name="pref_tomorrow_12pm_2pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>

在上面的代码中，我点击复选框后附加/显示下拉列表。现在我必须在取消选中当时的复选框时将下拉列表的值设置为null / default。

Javascript代码：

$('input[type="checkbox"]').click(function(){
    var inputValue = $(this).attr("id");
    $("." + inputValue).toggle();
});

这是我的JS代码，我将在我的复选框旁边附加选择div。

有人可以帮助我吗？

Answer 1

试试这个！：d

$(document).ready(function() {
    $('select').on('click change',function() {
        $(this).closest('div.checkbox').find('input:checkbox').prop('checked',$(this).val()>0);
    });
    $('input:checkbox').on('click change',function() {
        if (!$(this).is(':checked')) $(this).closest('div.checkbox').find('select').val('-1');
    });
});

请参阅codeply上的工作演示： http://www.codeply.com/go/7t3ZvFz5yF

Answer 2

取消选中复选框时执行某些操作

在您的功能内部，您可以检查是否选中/取消选中该复选框：

if (this.checked)

或

if (!this.checked)

并在if块中根据此条件放置您要执行的代码。

使用jQuery

从下拉列表中选择一个选项

您可以使用您要选择的选项的值属性：

$('#yourDropdown select').val('valueOfOptionToBeSelected`);

实施例

＆＃13;

$('input[type="checkbox"]').click(function(){
    
    var inputValue = $(this).attr("id");
    $("." + inputValue).toggle();
    
    if (!this.checked) {
      
      $("." + inputValue + ' select').val('-1');
    
    }
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
    <i class="tomorrow_8am_10am box" style="display:none">
        <select name="pref_tomorrow_8am_10am">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
    <i class="tomorrow_10am_12pm box" style="display:none">
        <select name="pref_tomorrow_10am_12pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox ">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
    <i class="tomorrow_12pm_2pm box" style="display:none">
        <select name="pref_tomorrow_12pm_2pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>

＆＃13;

此外，我不确定您的意图是什么，但您可能希望添加display: none以隐藏页面加载时的下拉菜单，然后在用户与复选框进行交互时切换可见性。

Answer 3

if ($('.tomorrow-schedule-time').is(':checked')){
            //
            } else {

               $('select').append('<option>Default</option>');
            }

Answer 4

我很确定我能得到你想要的东西。当你选中一个方框时，它会选择1（或你喜欢的任何东西）。取消选中后，它会将其设置为无偏好。

$('input[type="checkbox"]').click(function(){
    var inputValue = $(this).attr("id");
    if ($(this).is(":checked")) {
		$("." + inputValue + " select").val(1);
	} else {
		$("." + inputValue + " select").val(-1);
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
    <i class="tomorrow_8am_10am box">
        <select name="pref_tomorrow_8am_10am">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
    <i class="tomorrow_10am_12pm box">
        <select name="pref_tomorrow_10am_12pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox ">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
    <i class="tomorrow_12pm_2pm box">
        <select name="pref_tomorrow_12pm_2pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>

Answer 5

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_8am_10am" id="tomorrow_8am_10am" value="8am-10am">8am - 10am</label>
    <i class="tomorrow_8am_10am box">
        <select name="pref_tomorrow_8am_10am">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_10am_12pm" id="tomorrow_10am_12pm" value="10am-12pm">10am - 12pm</label>
    <i class="tomorrow_10am_12pm box">
        <select name="pref_tomorrow_10am_12pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>
<div class="checkbox ">
    <label><input type="checkbox" class="tomorrow-schedule-time" name="tomorrow_12pm_2pm" id="tomorrow_12pm_2pm" value="12pm-2pm">12pm - 2pm</label>
    <i class="tomorrow_12pm_2pm box">
        <select name="pref_tomorrow_12pm_2pm">
            <option value="-1">No Preferences</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </i>
</div>

role

取消选中复选框时，更改选择下拉列表的值

5 个答案:

取消选中复选框时执行某些操作

使用jQuery

实施例