取消选择，除了一个特定的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个复选框被选中。假设我点击'布料'，然后点击'木材'，它应该取消选中布料（第一个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 a change事件处理程序到inputDOM元素。

此外，使用.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); 
}); 

DEMO

$("#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>