Question

这是我的div

<div id="extras">
    <div class="col-md-12" id="extra-Material">
        <div class="form-group"><label>Material</label>
            <br
            ><label class="checkbox-inline mr10">
                <input name="ffp[]" type="checkbox" value="1_1"> Fabric</label>
            <label class="checkbox-inline mr10"><input name="ffp[]" type="checkbox" value="1_2"> Wood</label>
        </div>
    </div>
    <div class="col-md-12" id="extra-Color">
        <div class="form-group"><label>Color</label><br><label class="checkbox-inline mr10"><input name="ffp[]"
                                                                                                   type="checkbox"
                                                                                                   value="2_8">
                Brown</label><label class="checkbox-inline mr10"><input name="ffp[]" type="checkbox" value="2_5">
                Red</label></div>
    </div>
</div>

目前我有2个内部div extra-Material和extra-Color。这些是基本上动态生成的。所有这些附加的div在其中都有相同的复选框名称ffp[]。我希望一次选中1个复选框。让我们说我点击＆＃39; Fabric＆＃39;然后在＆＃39; Wood＆＃39;，它应该只取消选中Fabric（第一个div中的所有复选框，id = extra-Material），然后取消选中，然后检查Wood。与第二个div类似，依此类推。我搜索过，有代码可以取消选中页面上的所有复选框，但我不想这样做。有人可以帮帮我吗？

这是我的JS代码

if (json_data.length > 0) {
    var html = '';
    html += '<div class="col-md-12" id="extra-' + name + '">'
    html += '<div class="form-group">';
    html += '<label>' + name + '</label>';
    html += '<br>';
    json_data.forEach(function (entry) {

        html += '<label class = "checkbox-inline mr10" >';
        html += '<input name="ffp[]" type = "checkbox" value = "' + val + '_' + entry.ffp_id + '"> ' + entry.en_name + '';
        html += '</label>';

    });
    html += '</div>';
    html += '</div>';
    $('#extras').append(html);
}

Answer 1

试试这个

postgres://

<强>样本

$( "input[name='ffp[]']" ).bind( "change", function(){
    $(this).closest( ".form-group").find("input[name='ffp[]']").not($(this)).prop("checked", false);
});

$( "#extras" ).on("change", "input[name='ffp[]']", function() {
  $(this).closest( ".form-group").find("input[name='ffp[]']").not($(this)).prop("checked", false);
});

Answer 2

您必须bind change input DOM 元素的事件处理程序。

此外，使用.closest()方法以获取当前集合中的所有输入元素。

您应该使用.on方法绑定添加动态的元素的事件处理程序。

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

阅读有关事件委派的更多信息 here

＆＃13;

$(document).on('change', 'input[type="checkbox"]', function(){
   $(this).closest('.col-md-12').find('input[type="checkbox"]').prop('checked',false);
   $(this).prop('checked',true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="extras">
    <div class="col-md-12" id="extra-Material">
        <div class="form-group"><label>Material</label>
            <br
            ><label class="checkbox-inline mr10">
                <input name="ffp[]" type="checkbox" value="1_1"> Fabric</label>
            <label class="checkbox-inline mr10"><input name="ffp[]" type="checkbox" value="1_2"> Wood</label>
        </div>
    </div>
    <div class="col-md-12" id="extra-Color">
        <div class="form-group"><label>Color</label><br><label class="checkbox-inline mr10"><input name="ffp[]"
                                                                                                   type="checkbox"
                                                                                                   value="2_8">
                Brown</label><label class="checkbox-inline mr10"><input name="ffp[]" type="checkbox" value="2_5">
                Red</label></div>
    </div>
</div>

＆＃13;

取消选中特定div内的所有复选框，但选中的复选框除外

2 个答案: