复选框标记为单击链接

Question

好吧，我有一个关于如何在这里做到这一点的问题：

我希望当用户点击＆＃34;文字一个＆＃34;
时 然后是＆＃34;复选框＆＃34;它被检查并且链接在新选项卡中打开，对于＆＃34;文本2＆＃34;等等...

图像：

代码：

<form action="demo_form.asp" method="get">
  <a href="LinkURL" target="_blank">
 <input type="checkbox" name="link1" value="link"> Text one</a>
<br>
<br>
<a href="LinkURL" target="_blank">
<input type="checkbox" name="link2" value="link"> Text two</a>

</form>

Answer 1

您需要为label添加for="xx"，id="xx"添加input

注意两个值对于＆amp; id值

<a href="LinkURL" target="_blank">
    <input type="checkbox" name="link1" value="link" id="txt1">
    <label for="txt1">Text one</label>
</a>

<form action="demo_form.asp" method="get">
  <a href="LinkURL" target="_blank">
    <input type="checkbox" name="link1" value="link" id="txt1">
    <label for="txt1">Text one</label>
  </a>
</form>

或者您可以使用input

包裹label

<a href="LinkURL" target="_blank">
    <label><input type="checkbox" name="link2" value="link">Text two</label>
</a>

<form action="demo_form.asp" method="get">
  <a href="LinkURL" target="_blank">
    <label><input type="checkbox" name="link2" value="link">Text two</label>
  </a>
</form>

Answer 2

尝试标记和jquery

$(document).ready(function(){
  
  $('label[for=link]').on('click', function(){
    alert('write here code');
window.location.href= 'http://www.rohitazad.com';
  });
  
  $('label[for=link2]').on('click', function(){
    alert('write here code 2');
window.location.href= 'http://www.rohitazad.com';
  });
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action="demo_form.asp" method="get">
  
 <input type="checkbox" name="link1" value="link" id="link"><label for="link">Text one</label>
<br>
<br>
  
<input type="checkbox" name="link2" value="link" id="link2"> <label for="link2">
Text two</label>

</form>

Answer 3

我会这样：

<form action="demo_form.asp" method="get">
  <a href="LinkURL" target="_blank"  data-input='link1'>
  <input type="checkbox" name="link1" value="link"> Text one</a>
  <br>
  <br>
  <a href="#" data-input='link2'>
  <input type="checkbox" name="link2" value="link"> Text two</a>

</form>

<script>
$('a').click(function(e) {
  e.preventDefault();
  var input = $(this).attr('data-input');
  var checkbox = $('input:checkbox[name=' + input + ']');
  checkbox.prop("checked", !checkbox.prop("checked"));;
})
</script>

该链接是可切换的。那么我唯一想改变的就是将一些课程放在链接上，而不是$('a.class')代替$('a')

https://jsfiddle.net/yv7q5jb5/

Answer 4

添加label代码

    <form action="demo_form.asp" method="get">
<label>
    <a href="LinkURL" target="_blank">
        <input type="checkbox" name="link1" value="link"> Text one
    </a>
</label>
<br>
<br>
<label>
    <a href="LinkURL" target="_blank">
        <input type="checkbox" name="link2" value="link"> Text two
    </a>
</label>

https://jsfiddle.net/mb941zeL/2/