图像为复选框

Question

我有2张图片。
我想做的是让它可点击和选择 如果我选择第一个，则不应选择另一个。
如果我点击一个按钮，它应该在<p>标签

上打印所选图像的值

这是我搜索后得到的代码：

$('#img1').click(function() {
  var a = $('#img1');
  //A if else condition should be here to know wheather it already contain the class
  a.addClass('clicked')
})
$('#img2').click(function() {
  var a = $('#img2');
  //A if else condition should be here to know wheather it already contain the class
  a.addClass('clicked')
})
$('button').click(function() {
  var a = $('#img1').val();
  var b = $('#img2').val();
  $('p').html(/*The value of the selected image*/)
})

.clicked {
  box-shadow: 0 0 10px 2px grey;
}
img:hover {
  cursor: pointer;
  box-shadow: 0 0 10px 2px grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img src="http://www.w3schools.com/howto/img_avatar.png" width="100px" height="100px" id="img1" value="noo">
<img src="http://www.w3schools.com/howto/img_avatar2.png" width="100px" height="100px" id="img2" value="yes"><br>
<button>
Copy
</button>
<p>

</p>

Jsfiddle
感谢

Answer 1

我在点击功能

上更新了你的js使用$('#img1').removeClass('clicked');

$('#img1').click(function() {
var a = $('#img1');
 $('#img2').removeClass('clicked');
 //A if else condition should be here to know wheather it already contain the class
  a.addClass('clicked')
})
 $('#img2').click(function() {
    var a = $('#img2');
  $('#img1').removeClass('clicked');
//A if else condition should be here to know wheather it already contain the class
 a.addClass('clicked')
})

Answer 2

请使用此代码。

$(document).ready(function(){
$('img').click(function() {
    $('img').removeClass('clicked');
  $(this).addClass('clicked');
})
$('button').click(function() {
    var value = $('.clicked').attr("value");
  $('p').html(value);
})
});

Answer 3

$('img').click(function() {
  $('img').removeClass('clicked')
  $(this).addClass('clicked');
  console.log($(this).attr('data-value'))
})
$('button').click(function() {
  $('p').html($('img.clicked').attr('data-value'))
})

.clicked {
  box-shadow: 0 0 10px 2px grey;
}
img:hover {
  cursor: pointer;
  box-shadow: 0 0 10px 2px grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img src="http://www.w3schools.com/howto/img_avatar.png" width="100px" height="100px" id="img1" data-value="noo">
<img src="http://www.w3schools.com/howto/img_avatar2.png" width="100px" height="100px" id="img2" data-value="yes"><br>
<button>
Copy
</button>
<p>

</p>

1. 将attr值更改为data-attr，因为它不是有效的attr
2. 使用img标签，然后使用此上下文检测click元素
3. 使用data-attr显示值

Answer 4

试试这个

$('#img1').click(function() {
  resetClick();
  var a = $('#img1');
  //A if else condition should be here to know wheather it already contain the class
  a.addClass('clicked')
})
$('#img2').click(function() {
  resetClick();
  var a = $('#img2');
  //A if else condition should be here to know wheather it already contain the class
  a.addClass('clicked')
})
function resetClick(){
  $('#img1').removeClass('clicked');
  $('#img2').removeClass('clicked');
}
$('button').click(function() {
   $('p').html( $('img.clicked').attr('value'));  
})

.clicked {
  box-shadow: 0 0 10px 2px grey;
}
img:hover {
  cursor: pointer;
  box-shadow: 0 0 10px 2px grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img src="http://www.w3schools.com/howto/img_avatar.png" width="100px" height="100px" id="img1" value="noo">
<img src="http://www.w3schools.com/howto/img_avatar2.png" width="100px" height="100px" id="img2" value="yes"><br>
<button>
Copy
</button>
<p>

</p>

Answer 5

$('#img1').click(function() {
var a = $('#img1');
 $('#img2').removeClass('clicked');
 //A if else condition should be here to know wheather it already contain the class
  a.addClass('clicked')
})
 $('#img2').click(function() {
    var a = $('#img2');
  $('#img1').removeClass('clicked');
//A if else condition should be here to know wheather it already contain the class
 a.addClass('clicked')
})
$('button').click(function() {
$('p').html($('.clicked').attr('value'))
})

.clicked {
  box-shadow: 0 0 10px 2px grey;
}
img:hover {
  cursor: pointer;
  box-shadow: 0 0 10px 2px grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<img src="http://www.w3schools.com/howto/img_avatar.png" width="100px" height="100px" id="img1" value="noo">
<img src="http://www.w3schools.com/howto/img_avatar2.png" width="100px" height="100px" id="img2" value="yes"><br>
<button>
Copy
</button>
<p>

</p>