如何設置複選框使用鏈接或按鈕

Question

我正在創建一個報價生成器，而不是有小而複雜的複選框我想創建一些不錯的大'SELECT'按鈕，可以檢查後面的複選框場面。

我也想添加一個類到包含div當複選框被選中，所以我可以改變使用CSS的樣式。

這裏是我的HTML：

<div class="col span_1_of_3 grey_box"> 
    <h2>Title to go here...</h2> 
    <a href="" class="select_link button">Select</a> 
    <input class="checkbox" type="checkbox" name="add-on[]" value="{add_ons:title}" checked="" /> 
</div> 

任何建議，將不勝感激。

由於提前，

湯姆

Answer 1

你可能要考慮使用一個標籤來代替。這將允許您單擊文本來切換選中的狀態，而無需在其周圍編寫任何代碼。

<div class="col span_1_of_3 grey_box"> 
    <h2>Title to go here...</h2> 
    <label> 
    <input class="checkbox" type="checkbox" name="add-on[]" value="{add_ons:title}" checked="" /> 
    Select 
    </label> 
</div> 

Answer 2

您可能需要給一個複選框的ID或類來識別它，但低於演示瞭如何檢查它的時候，它已經改變了。

$('checkbox').change(function(){ 
     if($(this).is(':checked')){ 
     $(this).parents('div:first()').addClass("ron-burgandy"); 
     } 
}); 

Answer 3

你可以嘗試這樣的事情：

$(".select_link").click(function() { 
      if($(".checkbox").prop("checked") == true){ 
       $(".checkbox").prop("checked", false); 
      else { 
       $(".checkbox").prop("checked", true); 
      } 
    }); 

Answer 4

使用jQuery你可以做這樣的事情：

$('#btnSelect').click(function() { 
 
    $('#checkbox').prop("checked", true); 
 
    $('#containingDiv').css("background", "green"); 
 
});

#containingDiv { 
 
    height: 50px; 
 
    width: 100px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col span_1_of_3 grey_box"> 
 
    <h2>Title to go here...</h2> 
 

 
    <button id="btnSelect" class="select_link button">Select</button> 
 
    <input id="checkbox" class="checkbox" type="checkbox" name="add-on[]" /> 
 
</div> 
 
<div id="containingDiv">Content goes here</div>

Answer 5

你可以使用一個按鈕，你的「複選框」，使一個jQuery函數來檢查您的實際複選框，同時隱藏實際的複選框。

<div class="col span_1_of_3 grey_box"> 
    <h2>Title to go here...</h2> 
    <button>Select</button> 
    <input class="checkbox" type="checkbox" name="add-on[]" value="{add_ons:title}" checked="" /> 
</div> 


button:visited { 
    background: green; 
} 
input { 
    visibility: hidden; 
} 

$('button').click(function(){ 
    $('button').css('background','green'); 
    $('input').attr('checked'); 
    if ($('.checkbox').is(':checked')) { 
    //do whatever when checked 
    } 
});