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你可以这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何设置要使用链接或按钮检查的复选框

5 个答案: