jQuery選擇每行1複選框，其中複選框是圖像

我目前正在一個項目中，用戶將選擇多個複選框，但是，那麼將有一個條件，每個行選擇一個複選框。jQuery選擇每行1複選框，其中複選框是圖像

我的HTML使用引導樣式3.2

jQuery('.imgradio').click(function() { 
      jQuery('.imgradio.selected').not(this).removeClass('selected'); 
      jQuery("[type='checkbox']").prop('checked', false); 
      jQuery(this).toggleClass('selected'); 
      var rdio = jQuery(this).parent().find("input[type='checkbox']"); 
      if (jQuery(this).hasClass('selected')) { 
       rdio.prop('checked', true); 
      } 
      rdio.trigger('change'); 
     });

.row { 
    border:2px solid #333; 
} 

.imgradio { 
background: url('http://cdn3.iconfinder.com/data/icons/virtual-notebook/16/button_shape_oval-20.png') no-repeat center center; 
min-width: 32px; 
cursor: pointer; 
height: 22px; 
} 
.imgradio.selected { 
background:url('https://cdn2.iconfinder.com/data/icons/playstation-controller-buttons-3/64/playstation-flat-icon-circle-20.png') no-repeat center center; 
cursor:pointer; 
min-width: 32px; 
height: 22px; 
}

<div class="container"> 
    <div class="row bg-grey"> 
    <div class="col-sm-12 noPadding"> 
     <div class="row"> 
      <div class="col-sm-4"> 
       <p>Condition 1</p> 
      </div> 
      <div class="col-sm-2"> 
       <div class="imgradio">&nbsp;</div> 
       <input type="checkbox"/> 
      </div> 
      <div class="col-sm-2"> 
       <div class="imgradio">&nbsp;</div> 
       <input type="checkbox"/> 
      </div> 
      <div class="col-sm-2"> 
       <div class="imgradio">&nbsp;</div> 
       <input type="checkbox"/> 
      </div> 
      <div class="col-sm-2"> 
       &nbsp; 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-4"> 
       <p>Condition 2</p> 
      </div> 
      <div class="col-sm-2"> 
       <div class="imgradio">&nbsp;</div> 
       <input type="checkbox"/> 
      </div> 
      <div class="col-sm-2"> 
       <div class="imgradio">&nbsp;</div> 
       <input type="checkbox"/> 
      </div> 
      <div class="col-sm-2"> 
       <div class="imgradio">&nbsp;</div> 
       <input type="checkbox"/> 
      </div> 
      <div class="col-sm-2"> 
       &nbsp; 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-4"> 
       <p>Condition 3</p> 
      </div> 
      <div class="col-sm-2"> 
       <div class="imgradio">&nbsp;</div> 
       <input type="checkbox"/> 
      </div> 
      <div class="col-sm-2"> 
       <div class="imgradio">&nbsp;</div> 
       <input type="checkbox"/> 
      </div> 
      <div class="col-sm-2"> 
       <div class="imgradio">&nbsp;</div> 
       <input type="checkbox"/> 
      </div> 
      <div class="col-sm-2"> 
       &nbsp; 
      </div> 
     </div> 
    </div> 
</div> 
    
</div>

我有什麼對演示只能在中行的整個容器選擇1個複選框，我需要得到是每行選擇1個複選框。

容器可以包含無限行的複選框，所以腳本應該很複雜，不幸的是我是jQuery腳本中的新手。 :(

您的幫助和建議將非常感激

來源

2014-12-03 Nooblike

您需要遍歷最接近行元素，然後找到需要取消選中，並去除選定類元素使用：！

jQuery(this).closest('.row').find('.imgradio.selected').not(this).removeClass('selected'); 
     jQuery(this).closest('.row').find("[type='checkbox']").prop('checked', false); 
     jQuery(this).toggleClass('selected'); 
     var rdio = jQuery(this).parent().find("input[type='checkbox']"); 
     if (jQuery(this).hasClass('selected')) { 
      rdio.prop('checked', true); 
     } 
     rdio.trigger('change'); 
    });

Working Demo

來源

2014-12-03 06:07:55

有將具有顯示：無，所以用戶只能看到並選擇圓形圖像 – Nooblike 2014-12-03 06:09:55

nooblike：對於單選按鈕點擊已經正常工作。 – 2014-12-03 06:11:58

這個問題不起作用，腳本應該讓用戶每行選擇1個複選框。你展示的演示不會。它只在整個容器中選擇1個複選框。它應該選擇每行1個複選框。所以由於容器有3行，用戶可以選擇3個複選框。 :( 更正：你的代碼是正確的，但我怎樣才能使圖像做到這一點，而不是複選框？複選框將顯示沒有它，所以複選框將被隱藏，用戶將只能看到圓形圖像被選中:) – Nooblike 2014-12-03 06:13:06

只需添加這行

取而代之的是（不刪除選定到所有無線電布通）

jQuery('.imgradio.selected').not(this).removeClass('selected');

添加此（刪除 - 僅複選框內該特定.row）

$(this).closest(".row").find('.imgradio.selected').not(this).removeClass('selected');

Check this

來源

2014-12-03 06:17:38 Parthi04

回答

相關問題