jQuery выберите несколько атрибутов и установите/снимите еще один флажок.

Question

Как я могу определить следующие флажки в разных строках и проверить/снять флажок отдельно.

<input type="checkbox" value="F" name="eph-ds[2457][]"> 
<input type="checkbox" value="PR" name="eph-ds[2457][]"> 
<input type="checkbox" value="DPH" name="eph-ds[2457][]"> 
<input type="checkbox" value="F" name="eph-ds[2450][]"> 
<input type="checkbox" value="PR" name="eph-ds[2450][]"> 
<input type="checkbox" value="DPH" name="eph-ds[2450][]"> 

где [номер] динамически создан.

Пример: Если установлен флажок «F», снимите отметку «PR». Если установлен флажок «PR», снимите флажок «F». Если установлен флажок «DPH», снимите флажок.

$(":checkbox").change(function() { 
    var current = this.value; 
    if (current == "F") { 
$(":checkbox[value=PR]").prop("checked", false); 
    } 
     if (current == "PR") { 
$(":checkbox[value=F]").prop("checked", false); 

    } 
    if (current == "DPH") { 
$(":checkbox[value=F]").prop("checked", false); 
$(":checkbox[value=PR]").prop("checked", false); 

    } 
}); 

Этот код работает, но если я снимите флажок во втором ряду, то флажок в первой строке будет снят тоже:

Answer 1

Это сделает то, что вы запросили:

jsFiddle Working Example

var $this,num,val; 

$('input[name^="eph-ds["]').click(function() { 
    $this = $(this); 
    num = $this.attr('name').split('[')[1].replace("]", ""); 
    val = $this.val(); 
    if (val=="F"){ 
     $('input:checkbox[name="eph-ds['+num+'][]"][value="PR"]').prop('checked',false); 
    }else if (val=="PR"){ 
     $('input:checkbox[name="eph-ds['+num+'][]"][value="F"]').prop('checked',false); 
    }else if (val=="DPH"){ 
     $('input:checkbox[name="eph-ds['+num+'][]"]').not($this).prop('checked',false); 
    } 
}); 

Примечания:

1. Переменные, объявленные на вершине так т эй не должно быть повторно объявлено с каждым флажком нажмите

2. jsFiddle добавляет отключение F и PR, когда DPH проверяется (в противном случае после проверки пользователя DPH окна может проверить любой PR или F).

3. Не нужно запрашивать ваши флажки как группы (как предложено предыдущим респондентом)

4. Если трудно следовать, эта линия может быть разбита на три линии:
   num = $this.attr('name').split('[')[1].replace("]", "");

name = $this.attr('name'); //returns eph-ds[####][]
temp = name.split('[')[1]; //returns ####]
num = temp.replace("]", ""); //removes trailing ]

Answer 2

Пример API использует кавычки, чтобы исправить эту проблему ,

$("input[name='eph-ds[2457][]'][value='PR']").prop("checked", false); 

И выбрать все из них, независимо от динамического числа, используйте attr^=value

$("input[name^='eph-ds['][value='PR']").prop("checked", false); 

http://api.jquery.com/attribute-starts-with-selector/

Answer 3

Попробуйте это:

$("input[name=eph-ds[2457][]],input[value=PR]").prop("checked", false); 

Answer 4

Как это:

$('input[type="checkbox"]').prop('checked', false); 

Answer 5

Вам нужно обернуть флажки для того, чтобы иметь возможность запросить их как группы, я упростил разметку на это:

<div class="row"> 
    <input type="checkbox" value="F" name="eph-ds[2457][]">F<br/> 
    <input type="checkbox" value="PR" name="eph-ds[2457][]">PR<br/> 
    <input type="checkbox" value="DPH" name="eph-ds[2457][]">DPH<br/> 
</div> 

<div class="row"> 
    <input type="checkbox" value="F" name="eph-ds[2450][]">F<br/> 
    <input type="checkbox" value="PR" name="eph-ds[2450][]">PR<br/> 
    <input type="checkbox" value="DPH" name="eph-ds[2450][]">DPH<br/> 
</div> 

вы можете добавить ярлыки и все, дом элементы, которые вы имеете для ваших дизайн и структура, но важно иметь оболочку (div.row в моем случае)

Теперь использовать следующий скрипт:

<script> 
     $(document).ready(function(){ 
      $(":checkbox").change(function(){ 
       // get the wrapper so it won't affect the checkboxes in other rows 
       var _parent_row = $(this).closest(".row"); 
       // get the checkbox value 
       var _value = $(this).val(); 

       // uncheck PR if F is checked 
       if(_value == "F" && $(this).isChecked()) 
       { 
        var _pr = $(_parent_row).find(":checkbox[value='PR']"); 
        _pr.uncheck(); 
       } 

       // uncheck F if PR is checked 
       if(_value == "PR" && $(this).isChecked()) 
       { 
        var _f = $(_parent_row).find(":checkbox[value='F']"); 
        _f.uncheck(); 
       } 

       // uncheck All if DPH is checked 
       if(_value == "DPH" && $(this).isChecked()) 
       { 
        var _f = $(_parent_row).find(":checkbox[value='F']"); 
        var _pr = $(_parent_row).find(":checkbox[value='PR']"); 
        _f.uncheck(); 
        _pr.uncheck(); 
       } 
      }) 
     }) 

     // prototype function to test if a checkbox is checked 
     $.fn.isChecked = function(){ 
      return $(this).is(':checked'); 
     }; 

     // prototype function to check a textbox 
     $.fn.check = function(){ 
      $(this).attr('checked', true); 
     }; 

     // prototype function to uncheck a textbox 
     $.fn.uncheck = function(){ 
      $(this).attr('checked', false); 
     }; 
    </script> 

Это должно сделать это :) Вы все еще можете использовать .isChecked(), .check() и .uncheck() в любом другом флажке в своем документе (так что вам не придется повторять себя)

Answer 6

проверить это JSFiddle Example

HTML код

<div class="row"> 
    <input type="checkbox" value="F" name="eph-ds[2457][]">F<br/> 
    <input type="checkbox" value="PR" name="eph-ds[2457][]">PR<br/> 
    <input type="checkbox" class="clear" value="DPH" name="eph-ds[2457][]">DPH<br/> 
</div> 

<div class="row"> 
    <input type="checkbox" value="F" name="eph-ds[2450][]">F<br/> 
    <input type="checkbox" value="PR" name="eph-ds[2450][]">PR<br/> 
    <input type="checkbox" class="clear" value="DPH" name="eph-ds[2450][]">DPH<br/> 
</div> 

JQuery код

$(document).ready(function(){ 

    $('.row .clear').change(function(){ 
     clearFunction($(this).parent('.row')); 
     $(this).prop("checked",false); 
    }); 


    $('.row input:checkbox').change(function(){ 
     $(this).siblings('input').prop("checked", false); 
    }); 
}); 
    function clearFunction(localEl){ 
     localEl.children('input:checkbox').each(
      function(){ 
       if($(this).prop('checked')){ 
        $(this).removeAttr('checked'); 
       } 
      } 
     ); 
    } 

Answer 7

сделал это за 10 минут

please check it out my minimalist approch

<div> 
<input type='checkbox' class='mEx cBox' name='F' title='F'/> 
<input type='checkbox' class='mEx cBox' name='PR' title='PR'/> 
<input type='checkbox' class='Ex cBox' name='DPH' title='DPH'/> 
</div> 

$('.cBox').change(function(){ 
    var current = $(this); 
    var parentCntr = current.parent(); 
    var isChecked = current.is(':checked'); 
    if(isChecked) {   
     if(current.hasClass('Ex')) { 
      $('.mEx',parentCntr).attr({checked:false,disabled:true}); 
     }else if(current.hasClass('mEx')) { 
      $('.mEx',parentCntr).attr({checked:false}); 
      current.attr({checked:true}); 
     }  
    }else{ 
     if(current.hasClass('Ex')) { 
      $('.mEx',parentCntr).attr({disabled:false}); 
     } 
    } 
}); 

Я думаю, что требуемое поведение chekboxes не имеет ничего общего с тиром значениями