jquery nur die Eingänge, die zu der Prüfung gehören alle

Question

Wie kann ich dies, dass die Prüfung alle nur die 4 Eingänge, die zu diesem Check alle konzentrieren konzentrieren? Wenn Sie nun auf 2 (oder 3) Link alles klicken und Sie einen Eingang ändern, ändern sich alle Eingaben dann. Ich möchte nur, dass sich die Eingaben ändern, die zu dieser Prüfung alle gehören.

$(document).ready(function() { 
 
    var s; 
 

 
    $('.margin-checkall').on('click', function() { 
 
    $(this).toggleClass('checked'); 
 
    }); 
 

 
    $('.css-margin').on('change', function() { 
 
    s = $(this).val(); 
 
    $(this).val(s); 
 
    if ($('.margin-checkall').hasClass('checked')) { 
 

 
     $('.margin-checkall.checked').parent().parent().next('ul').find('li').each(function() { 
 
     $(this).find('.css-margin').val(s); 
 
     }); 
 
    } 
 
    }); 
 
});

html, 
 
body { 
 
    font: 12px/1.0em Arial; 
 
} 
 

 
.margin-checkall { 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
.margin-checkall:hover, 
 
.margin-checkall.checked { 
 
    color: #0085ba; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="css-layout-margin"> 
 
    <div class="caption"> 
 
    <div class="link"> 
 
     <span class="margin-checkall">Link all values.</span> 
 
    </div> 
 
    </div> 
 

 
    <ul> 
 
    <li> 
 
     <label>Top</label> 
 
     <input type="text" class="css-margin" value="" tabindex="1"> 
 
    </li> 
 
    <li> 
 
     <label>Right</label> 
 
     <input type="text" class="css-margin" value="" tabindex="2"> 
 
    </li> 
 
    <li> 
 
     <label>Bottom</label> 
 
     <input type="text" class="css-margin" value="" tabindex="3"> 
 
    </li> 
 
    <li> 
 
     <label>Left</label> 
 
     <input type="text" class="css-margin" value="" tabindex="4"> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="css-layout-margin"> 
 
    <div class="caption"> 
 
    <div class="link"> 
 
     <span class="margin-checkall">Link all values.</span> 
 
    </div> 
 
    </div> 
 

 
    <ul> 
 
    <li> 
 
     <label>Top</label> 
 
     <input type="text" class="css-margin" value="" tabindex="1"> 
 
    </li> 
 
    <li> 
 
     <label>Right</label> 
 
     <input type="text" class="css-margin" value="" tabindex="2"> 
 
    </li> 
 
    <li> 
 
     <label>Bottom</label> 
 
     <input type="text" class="css-margin" value="" tabindex="3"> 
 
    </li> 
 
    <li> 
 
     <label>Left</label> 
 
     <input type="text" class="css-margin" value="" tabindex="4"> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="css-layout-margin"> 
 
    <div class="caption"> 
 
    <div class="link"> 
 
     <span class="margin-checkall">Link all values.</span> 
 
    </div> 
 
    </div> 
 

 
    <ul> 
 
    <li> 
 
     <label>Top</label> 
 
     <input type="text" class="css-margin" value="" tabindex="1"> 
 
    </li> 
 
    <li> 
 
     <label>Right</label> 
 
     <input type="text" class="css-margin" value="" tabindex="2"> 
 
    </li> 
 
    <li> 
 
     <label>Bottom</label> 
 
     <input type="text" class="css-margin" value="" tabindex="3"> 
 
    </li> 
 
    <li> 
 
     <label>Left</label> 
 
     <input type="text" class="css-margin" value="" tabindex="4"> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

Das Problem ist mit $('.margin-checkall'). Dadurch werden alle Elemente mit dieser Klasse abgerufen, während Sie nur die Elemente erhalten möchten, die direkt vor Ihren Eingabeelementen im Code stehen.

$(document).ready(function() { 

    $('.margin-checkall').on('click', function() { 
    $(this).toggleClass('checked'); 
    }); 

    $('.css-margin').on('change', function() { 
    var $this = $(this); 
    var $container = $this.closest('.css-layout-margin'); 
    if ($container.find('.margin-checkall').hasClass('checked')) { 
     $container.find('.css-margin').val($this.val()); 
    } 
    }); 

}); 

Answer 2

Hier gehen Sie mit einer weiteren Lösung: - https://jsfiddle.net/rjjuw03o/1/

$(document).ready(function() { 
 

 
\t var s; 
 

 
    $('.margin-checkall').on('click', function() { 
 
    $(this).toggleClass('checked'); 
 
    }); 
 

 
    $('.css-margin').on('change', function() { 
 
    s = $(this).val(); 
 
\t \t $(this).val(s); 
 
    var test = $(this).closest('.css-layout-margin').find('.margin-checkall'); 
 
    if ($(test).hasClass('checked')) { 
 

 
     $(test).parent().parent().next('ul').find('li').each(function() { 
 
     $(this).find('.css-margin').val(s); 
 
     }); 
 
    } 
 
    }); 
 

 
});

html, 
 
body { 
 
    font: 12px/1.0em Arial; 
 
} 
 

 
.margin-checkall { 
 
    display: inline-block; 
 
    cursor: pointer; 
 
} 
 

 
.margin-checkall:hover, 
 
.margin-checkall.checked { 
 
    color: #0085ba; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script> 
 
<div class="css-layout-margin"> 
 
    <div class="caption"> 
 
    <div class="link"> 
 
     <span class="margin-checkall">Link all values.</span> 
 
    </div> 
 
    </div> 
 

 
    <ul> 
 
    <li> 
 
     <label>Top</label> 
 
     <input type="text" class="css-margin" value="" tabindex="1"> 
 
    </li> 
 
    <li> 
 
     <label>Right</label> 
 
     <input type="text" class="css-margin" value="" tabindex="2"> 
 
    </li> 
 
    <li> 
 
     <label>Bottom</label> 
 
     <input type="text" class="css-margin" value="" tabindex="3"> 
 
    </li> 
 
    <li> 
 
     <label>Left</label> 
 
     <input type="text" class="css-margin" value="" tabindex="4"> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="css-layout-margin"> 
 
    <div class="caption"> 
 
    <div class="link"> 
 
     <span class="margin-checkall">Link all values.</span> 
 
    </div> 
 
    </div> 
 

 
    <ul> 
 
    <li> 
 
     <label>Top</label> 
 
     <input type="text" class="css-margin" value="" tabindex="1"> 
 
    </li> 
 
    <li> 
 
     <label>Right</label> 
 
     <input type="text" class="css-margin" value="" tabindex="2"> 
 
    </li> 
 
    <li> 
 
     <label>Bottom</label> 
 
     <input type="text" class="css-margin" value="" tabindex="3"> 
 
    </li> 
 
    <li> 
 
     <label>Left</label> 
 
     <input type="text" class="css-margin" value="" tabindex="4"> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="css-layout-margin"> 
 
    <div class="caption"> 
 
    <div class="link"> 
 
     <span class="margin-checkall">Link all values.</span> 
 
    </div> 
 
    </div> 
 

 
    <ul> 
 
    <li> 
 
     <label>Top</label> 
 
     <input type="text" class="css-margin" value="" tabindex="1"> 
 
    </li> 
 
    <li> 
 
     <label>Right</label> 
 
     <input type="text" class="css-margin" value="" tabindex="2"> 
 
    </li> 
 
    <li> 
 
     <label>Bottom</label> 
 
     <input type="text" class="css-margin" value="" tabindex="3"> 
 
    </li> 
 
    <li> 
 
     <label>Left</label> 
 
     <input type="text" class="css-margin" value="" tabindex="4"> 
 
    </li> 
 
    </ul> 
 
</div>

Statt Looping die alle durch .margin-checkall, nur Schleife durch den fokussierten Eingangs div .