取消选择特定 div 内的所有复选框，除了选中的复选框

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 个复选框。假设我单击“Fabric”，然后单击“Wood”，它应该只取消选择 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

您必须将bind change 事件处理程序传递给input DOM 元素。

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

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

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

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

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

<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>

Answer 2

试试这个

$( "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);
});

<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>