jquery只有屬於全部檢查的輸入

Question

我怎樣才能使這個檢查全部只關注屬於該檢查的所有4個輸入？如果您現在單擊2（或3）全部鏈接，並且您更改了一個輸入，則所有輸入都會改變。我只希望輸入變化屬於那個檢查全部。

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

問題是與$('.margin-checkall')。這將獲取具有此類的所有元素，而您只需要在代碼中的輸入元素之前的元素。

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

在這裏你去多了一個解決方案： - 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>

而不是通過所有的.margin-checkall，通過重點投入的div只是循環的循環。