如何设置复选框使用链接或按钮

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 
    } 
});